css - 将透明图像放在背景图像上

Question

听起来很简单，但很难让它发挥作用。

我认为这会很简单，因为...但我遗漏了一些东西。

好的，我有一个加载背景图像的 div。围绕这个 div 的是另一个 div，它有一个透明的背景图像。

想法是显示背景图像，但在其顶部覆盖透明图像。

我没有必要发布图片，所以这里有一些代码。

html:

<div class="transparent">
                                <div class="solid">&nbsp;</div>
                            </div>

CSS:

.solid {
background-image: url('../images/solidimage.jpg');
background-repeat: no-repeat;
width: 637px;
height: 306px;
z-index:1;
}
.transparent {
background-image: url('../images/clearimagewithwatermark.png');
background-repeat: no-repeat;
width: 637px;
height: 306px;
z-index:1000;
}

这个想法是，如果用户右键单击图像以查看背景图像，他们会看到带有水印的透明图像。它不是真的为了安全，我只是想这样做:)

Answer 1

你应该反过来做，内部 div 位于外部 div 之上，所以它会像...

<div class="solid">
  <div class="transparent">&nbsp;</div>
</div>