CSS中的background-size属性用于指定背景图片的大小。
background-size: value;
value可以是以下几种取值:
- auto:使用原始图片的尺寸
- length:用像素、厘米、毫米或英寸指定具有固定尺寸。例如:background-size: 50px 100px;
- percentage:百分比值。例如:background-size: 50% 100%;
- cover:保证背景图片完全覆盖容器,可能会被截断。例如:background-size: cover;
- contain:保证图片完全显示在容器内,可能会留有空白。例如:background-size: contain;
举个例子,如下代码会设置背景图片的宽度为50%,高度为200px。
background-image: url("example.jpg"); background-repeat: no-repeat; background-size: 50% 200px;
在移动端网页设计中,background-size的应用尤为广泛。我们可以利用background-size来优化网页背景图片的大小,在不同的屏幕尺寸下,让背景图片看起来更加美观和富有艺术感。