css中怎么设置图片填充 |sublime text3新建css

1. 将图片平铺整个元素

.element {
background-image: url('images/picture.jpg');
background-repeat: repeat;
}

其中，background-repeat属性用于设置图片的重复方式。repeat表示平铺重复，repeat-x表示水平方向平铺重复，repeat-y表示垂直方向平铺重复，而no-repeat表示不重复。

2. 让图片自适应元素大小，使用background-size属性

.element {
background-image: url('images/picture.jpg');
background-repeat: no-repeat;
background-size: cover;
}

可以使用contain属性将图片缩放至最大，但不超出元素大小，使用cover属性将图片填充整个元素，但可能会被裁切。

3. 将图片定位并进行裁切，使用background-position和background-clip属性

.element {
background-image: url('images/picture.jpg');
background-repeat: no-repeat;
background-position: center;
background-clip: content-box; /* 裁切内容区域，可选border-box、padding-box */
}

background-position属性用于设置背景图片的起始位置，常用的值有：left top、center、right bottom等。background-clip属性用于设置背景图片的裁切区域，常用的值有：border-box、padding-box、content-box。

以上就是CSS中设置图片填充的几种方式，不同的场景选择不同的方式可以达到更好的效果。