background-image多张图片分别设置图片大小
时间: 2023-10-09 19:16:42 浏览: 198
vue的style绑定background-image的方式和其他变量数据的区别详解
可以使用background-image中的多个背景图片来实现不同大小的效果。例如,可以按照以下方式设置:
```css
div {
background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
background-size: auto 100%, 50% auto, cover;
background-position: left top, center center, right bottom;
}
```
上述代码将三个背景图片应用于div元素,并分别设置它们的大小、位置。第一个背景图的宽度自动适应,高度为100%;第二个背景图的高度自动适应,宽度为50%;第三个背景图按比例缩放以填充整个div元素。背景图片的位置分别为左上角、居中、右下角。
阅读全文