background-size属性的几个实用的值
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了background-size属性的几个实用的值相关的知识,希望对你有一定的参考价值。
先来看w3c的background-size的几个值:
background-size:cover; 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
在项目中经常会使用一张背景图当作网页背景,我一直使用的是 background-size:cover; cover这个值是使背景图铺满全屏,但是背景图片可能显示不完全。
后来发现 background-size:100% 100%; 可以使图片铺满全屏并且使背景图片显示完全(荡然不同屏幕下背景图片会被拉伸或缩小),这个值相对于cover来说,更适合用来设置全屏背景,尤其是自适应宽高的网页中。
还有个 background-size:contain; 这个就是把背景图等比例缩放,尽量适应屏幕。
以上是关于background-size属性的几个实用的值的主要内容,如果未能解决你的问题,请参考以下文章