该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
随着逐浪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的图片体积。
但是在移动设备上没