html中背景图⽚等⽐例缩放,CSS实现响应式全屏背景图+⽤CSS3实现全屏按⽐例缩放背景。。。
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
随着逐浪CMS新版的⼀些效果逐渐放出，有不少的朋友想全屏的背景图⽚如何设计。
在不同的时代有不同的流⾏⽹站显⽰形式，当前很流⾏的⼀种⽹页形式就是满屏⼤图，本⽂将⽤最简单的⽅式实现该效果。⽤到了CSS 属性background-size ,⽆需javascript。
先看demo，打开后，调整浏览器窗⼝⼤⼩，观察背景图的变化。
如果在你的项⽬中也需要这样的效果，那么你就来对地⽅了。
基本语法：
.css{ background-image:url("wood.jpg");background-size:cover;background-repeat: no-repeat;background-attachment: fixed;}核⼼概念
使⽤background-size 属性，填充整个viewport
当css属性background-size 值为cover时，浏览器会⾃动按⽐例缩放背景图的宽和⾼，直到⼤于或等于viewport的宽和⾼
使⽤媒体查询为移动设备提供更⼩尺⼨的背景图
为什么要给移动设备提供⼩尺⼨背景图呢？在demo中，我们看到的背景图的实际尺⼨为5498px * 3615px，使⽤这么⼤尺⼨图⽚的⽬的是满⾜绝⼤多数宽屏显⽰器，并且不会显⽰模糊，⽽代价就是1.7MB的图⽚体积。
但是在移动设备上没有必要使⽤这么⼤的图⽚，同时⼤图还会导致加载变慢，尤其是在移动⽹络下。
需要说明的是：为移动设备提供⼩背景图对该技术⽅案来说是可选的。
实践
HTML
后⾯我们会给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。
其实，该⽅案对所有的块级容器都可以⽣效。如果你的块级容器的宽⾼是动态的，那么背景图将⾃动伸缩，充满整个容器。
CSS body标签的样式如下：
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;}
上⾯最重要的⼀条就是：
background-size: cover;
这样浏览器就会按⽐例缩放背景图直⾄背景图宽⾼不⼩于容器的宽⾼(在上⾯的例⼦中，就是body标签)。
这⾥需要注意的⼀点就是：如果背景图⼩于body标签的尺⼨(例如在⾼分辨率显⽰器上，或页⾯内容特别多时)，浏览器会拉伸图⽚。我们都知道，当把⼀个图⽚拉伸时，图⽚会变模糊。
因此，在选择背景图时，要特别注意尺⼨。为了照顾到⼤尺⼨屏幕，demo⾥⽤的图⽚尺⼨为5498px * 3615px 。
html图片展示特效同时，为了让背景图始终相对于viewport居中，我们声明了：
background-position: center center;
上⾯的规则会把背景图缩放的原点定位到viewport的中⼼。
接下来我们需要解决的问题是：当内容的⾼度⼤于viewport的⾼度时，会出现滚动条。我们希望背景图始终相对于viewport固定，即使⽤户滚动时也是⼀样。
解决办法就是：
background-attachment: fixed;(可选)使⽤媒体查询应对⼩屏幕
为了应对⼩屏幕，我⽤photoshop将背景图按⽐例缩放到768px * 505px，然后通过smush.it 压缩图⽚体积。这样就将图⽚体积从
1741KB降到114KB，节省了93%。
下⾯是媒体查询的写法：
@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); }}
上⾯的媒体查询将max-width: 767px 设为断点，也就是说当浏览器viewport⼤于767px时，会使⽤⼤背景图，反之使⽤⼩背景图。
使⽤上⾯媒体查询不利的⼀⾯是，如果你把浏览器窗⼝从1200px缩⼩到640px(反之亦然)，你会看到⼀个短暂的闪烁，因为⼩背景图或⼤背景图正在加载。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。