body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg); /* 背景图垂直、水平均居中 */
background-position: center center; /* 背景图不平铺 */
background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed; /* 让背景图基于容器大小伸缩 */
background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}

CSS实现响应式全屏背景图的更多相关文章

  1. css实现响应式全屏背景

    利用css中 background-size:cover  填充整个viewport 注意: 一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真: 但是在移动端使用 ...

  2. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  3. jQuery10种不同动画效果的响应式全屏遮罩层

    遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...

  4. css设置全屏背景图,background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

  5. 基于html5和css3响应式全屏滚动页面切换效果

    分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览   源码下载 HTML wrappe ...

  6. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  7. swiper实现响应式全屏自动轮播

    html: <!--轮播 --> <div class="Excellent_swi"> <div class="swiper-contai ...

  8. unity中全屏背景图缩放

    using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...

  9. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

随机推荐

  1. jQuery Ajax -附示例

    jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery 不是生产者,而是大自然搬运工. jQuery Aja ...

  2. flask第十篇——url_for【3】

      继续url_for的知识点 # coding: utf-8 from flask import Flask, url_forimport flask app = Flask(__name__)   ...

  3. C++ 动态存储空间的分配和释放 new与malloc的区别

    使用new申请空间: 特点: 1.没有名字,只能通过指针间接访问它们. 2.从堆中申请空间 分类: 变量: 语法:指针变量 = new 类型名; Delete 指针变量 举例:int *p; p=ne ...

  4. netty相关

    https://my.oschina.net/jamaly/blog/272385两个客户端之间的交互 http://blog.csdn.net/a953713428/article/details/ ...

  5. CocosCreator原生平台退出游戏,暂停和继续

    原生平台退出游戏,方法为:cc.director.end();官方解释:End the life of director in the next frame暂停游戏,方法: cc.director.p ...

  6. 详解SpringMVC中Controller的方法中参数的工作原理

    Spring MVC中Controller的处理方法的参数可以是Integer,String,自定义对象,ServletRequest,ServletResponse,ModelAndView等等,非 ...

  7. Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值

    Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值 说到循环遍历,最常见的遍历数组/列表.Map等.但是,在开发过程中,有时需要循环遍历一个对象的所有属性.遍历对象的属性该如何遍历呢?查了 ...

  8. V-rep学习笔记:转动关节2

    Torque or force mode: in this mode, the joint is simulated by the dynamics module, if and only if it ...

  9. sublime text3全局设置

    1.快捷键 ctrl+shift+p 2.输入 PackageResourceViewer 3.找到后 Open Resource 打开  , 4.选择 Theme-default,鼠标双击Theme ...

  10. CentOS 6.5系统上安装SVN服务器端的方法及目录访问权限配置(转总结)

    SVN其实就是Subversion,分为服务器端和客户端.之前在网上搜了很多方法,都有各种问题,经过自己搜集整理以及实际尝试,总算有个比较靠谱的方法.本文主要介绍CentOS 6.5系统上安装SVN服 ...