CSS Background-Sie 属性小记

今天在研究用 CSS 实现背景图片铺满浏览器窗口的方法，先是在 StackOverflow 上找到一个方法 show full height background image 来实现背景图填满浏览器高度的需求，但是效果并不好，窗口底部会有一块空白区域，并且右侧有滚动条，在前端群里讨论了一番之后，发现用 background-size: cover; 语句即可解决该问题。在 W3Schools 上查看了一下该属性的说明，在 Background-Size Property Values 这个页面中，可以查看不同属性值会有什么样的表现，整理如下：

属性值
表现方式

auto
背景图的原始尺寸

initial
背景图的原始尺寸

px px
指定的尺寸

*px
指定的宽度，并保持图片原始高宽比

100% 100%
撑满填充区域的宽和高

X%
相对于填充区域的宽度比例，并保持图片原始高宽比

cover
撑满填充区域的宽度，并保持图片原始高宽比

contain
撑满填充区域的高度，并保持图片原始高宽比

对比上面表格中的几种属性，可以发现 100% 和 cover 两种属性实现的效果是一样的，auto 和 initial 实现的效果是一样的。

最后为了实现背景图片铺满浏览器窗口的需求，将背景图裁剪成了 16:10 的比例，并且用 cover 属性，这样就可以满足大部分的应用场景了。

关键字：css, 原始, 属性, cover

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！