码迷,mamicode.com
首页 > 其他好文 > 详细

background-size属性的几个实用的值

时间:2017-06-20 17:52:54      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:网页   显示   定位   contain   宽高   背景图片   完全   实用   屏幕   

先来看w3c的background-size的几个值:

 background-size:cover;    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

 background-size:contain;  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

在项目中经常会使用一张背景图当作网页背景,我一直使用的是 background-size:cover; cover这个值是使背景图铺满全屏,但是背景图片可能显示不完全。

后来发现 background-size:100% 100%;  可以使图片铺满全屏并且使背景图片显示完全(荡然不同屏幕下背景图片会被拉伸或缩小),这个值相对于cover来说,更适合用来设置全屏背景,尤其是自适应宽高的网页中。

还有个 background-size:contain;  这个就是把背景图等比例缩放,尽量适应屏幕。

background-size属性的几个实用的值

标签:网页   显示   定位   contain   宽高   背景图片   完全   实用   屏幕   

原文地址:http://www.cnblogs.com/sapho/p/7054825.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!