首页 > 代码库 > background-size属性的几个实用的值
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属性的几个实用的值
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。