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. SqlDataAdapter更新数据

    插入.更新和删除的排序 在许多情况下,以何种顺序向数据源发送通过 DataSet 作出的更改是相当重要的. 例如,如果已更新现有行的主键值并且添加了具有新主键值的新行, 则务必要在处理插入之前处理更新 ...

  2. loj#2013. 「SCOI2016」幸运数字 点分治/线性基

    题目链接 loj#2013. 「SCOI2016」幸运数字 题解 和树上路径有管...点分治吧 把询问挂到点上 求出重心后,求出重心到每个点路径上的数的线性基 对于重心为lca的合并寻味,否则标记下传 ...

  3. [CF521D]Shop

    [CF521D]Shop 题目大意: 你有一个长度为\(k(k\le10^5)\)的数列\(A_{1\sim k}\),有\(n(n\le10^5)\)种操作,操作包含以下\(3\)种: 将\(A_x ...

  4. Oracle DML容错处理(2)

    关于DML Error Logging效率的问题,摘自网上一篇文章,作为单独一篇说明,原文如下: DML Error Logging in Oracle 10g Database Release 2 ...

  5. Syntax error , insert “EnumBody” to complete EnumDeclaration

    当@Test写在方法前面的时候因为没有导入junit的jar包,如果已经导入架包依然是同样的错误,那就是方法没写对,或者还没有写方法

  6. C++.Linux下redis编程:error while loading shared libraries: libhiredis.so.0.13

    编译 sudo gcc -o sltest01 sltest01.c -L/usr/local/lib/ -lhiredis 运行 sudo ./sltest01 编译成功后运行报错信息: ./slt ...

  7. lambda、map、reduce、filter函数讲解

    # coding:utf-8 """ 几个特殊的函数: lambda lambda后面直接跟变量 变量后面是冒号 冒号后面是表达式,表达式计算结果就是本函数的返回值 作用 ...

  8. Netbeans异常之cannet locate java installation in specified jdkhome

    原因:更改了jdk安装版本 方法:修改netbeans安装目录下ect下netbeans文件, 详细代码位置: # Default location of JDK: # (set by install ...

  9. __Linux__操作系统发展史

    常见操作系统win7.Mac.Android.iOS . 操作系统的发展史 1.Unix 1965年之前的时候,电脑并不像现在一样普遍,它可不是一般人能碰的起的,除非是军事或者学院的研究机构,而且当时 ...

  10. PHP 计算两个时间戳之间相差的时间

    //功能:计算两个时间戳之间相差的日时分秒 //$begin_time 开始时间戳 //$end_time 结束时间戳 function timediff($begin_time,$end_time) ...