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. Chrome for Mac键盘快捷键!来自Google Chrome官网!

    ⌘-N 打开新窗口. ⌘-T 打开新标签页. ⌘-Shift-N 在隐身模式下打开新窗口. 按 ⌘-O,然后选择文件. 在 Google Chrome 浏览器中打开计算机中的文件. 按住 ⌘ 键,然后 ...

  2. 【11.8校内测试】【倒计时2天】【状压DP】【随机化?/暴力小模拟】

    Solution 数据范围疯狂暗示状压,可是一开始发现状态特别难受. 将每一层的奇偶性状压,预处理所有状态的奇偶性.每一层的输入代表的其实可以是下一层某个点可以被从这一层哪些点转移到. 所以枚举每个状 ...

  3. ssm中从页面到controller和数据库出现乱码问题的解决

    1.确保项目编码为utf8,点击项目右键,点击properties 2.确保数据库编码为utf8,以MySQL为例,可到mysql目录下,my.ini文件中修改后,重启mysql服务 重启mysql服 ...

  4. CocosCreator项目结构

    1,通过 Dashboard,我们可以创建一个 Hello World 项目作为开始,创建之后的项目有特定的文件夹结构.[参考来源:官方文档] 2,初次创建并打开一个 Cocos Creator 项目 ...

  5. 虚拟机(VMware Workstation)的使用方法(转)

    虚拟机(VMware Workstation)的使用方法:http://www.aboutyun.com/thread-6273-1-1.html

  6. python测试开发django-44.xadmin自定义菜单项

    前言 xadmin后台的菜单项是放到一个app下的,并且里面的排序是按字母a-z排序,有时候我们需要划分多个项,需要自定义菜单列表,可以通过重写CommAdminView类实现. xadmin后台提供 ...

  7. svn与git操作对比 (未来有空做一个 svn与git实战对比 )

    svn是集中式的,git是分布式的,但是我们日常使用的都是按照集中式唯一服务器仓库的方式来去做的,最终我们的代码都要提交到一个唯一仓库中. 他们最大的区别是本地工作拷贝的工作方式不同, 一.svn本地 ...

  8. AS 自定义 Gradle plugin 插件 案例 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  9. sql server management studio 查询的临时文件路径

    C:\Users\你的登录名称\Documents\SQL Server Management Studio\Backup Files C:\Users\你的登录名称\AppData\Local\Te ...

  10. MSSQL存储过程

    存储过程的种类:       1.系统存储过程.        以sp_开头      2.扩展存储过程.        以xp_开头      3.用户定义存储过程. --重新编译存储过程 exec ...