我已经在网上寻找答案,但找不到如何添加两个图像并使用相同的 css 元素定位它们
我的代码看起来像
div.coupon {
background-image: url(slice.png), url(notice.png);
background-position: center, right bottom;
}
我可以使其仅与 (slice.png) 一起使用,但是当我尝试添加 (notice.png) 时,它会删除两个图像。有人有想法吗?
我已经在网上寻找答案,但找不到如何添加两个图像并使用相同的 css 元素定位它们
我的代码看起来像
div.coupon {
background-image: url(slice.png), url(notice.png);
background-position: center, right bottom;
}
我可以使其仅与 (slice.png) 一起使用,但是当我尝试添加 (notice.png) 时,它会删除两个图像。有人有想法吗?
不是很容易(无论如何对于跨浏览器的支持)...您需要通过一些技巧来发挥创意...
此方法还允许您通过 css3 动画为每个图像等获得更多创意。
这是一个超级简单的解决方法示例,可以帮助您入门:http: //jsfiddle.net/XGrzZ/
HTML:
<div class="background-1">
<div class="background-2"></div>
</div>
CSS:
.background-1 {
position: relative;
width:100%;
height:400px;
background:rgba(34,35,55,0.1); //replace with image
}
.background-2 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(90,39,68, 0.3); // replace with image
}