Question

我已在线查看答案，但无法找到如何添加两个图像并使用相同的css元素定位它们

我的代码看起来像

div.coupon {
  background-image: url(slice.png), url(notice.png);
  background-position: center, right bottom; 
}

我可以使用（slice.png），但是当我尝试添加（notice.png）时，它会删除两个图像。有人有想法吗？

Answer 1

不是很容易（反正支持跨浏览器支持）......你需要通过一些诡计来获得创意......

此方法还允许您为每个图像等使用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
}

CSS - 2个背景图像和定位

1 个答案: