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属性的几个实用的值的主要内容,如果未能解决你的问题,请参考以下文章

ES6的几个实用技巧,你了解吗?

分区的几个实用命令

前端还原设计图常遇到的几个坑

如何使用xmllint / xpath解析不同元素上的几个属性的值?

JS的几个小测试错题改错

background-position和background-size的顺序问题