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的图片体积。

但是在移动设备上没