2

我需要创建一个像图像一样显示的交叉图像。Div 1 没有固定的高度，它会有所不同。
那么如何在 Div 1 中创建交叉水印呢？

我试过喜欢

.cross01 {
width:520px;
height:100%;
background:url(../images/cross01.png) repeat-y;
position:absolute;
top:0px;
z-index:1000;

}
4

2 回答 2

3

您可以向图像添加包装器并使用 after 选择器。

看演示

CSS

.watermark {
    position: relative;
}
.watermark:after {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

HTML

<div class="watermark">
    <img src="http://ecx.images-amazon.com/images/I/61BcAJJgyXL._SX450_.jpg"></img>
</div>
<div>
    <img src="http://ecx.images-amazon.com/images/I/61BcAJJgyXL._SX450_.jpg"></img>
</div>
于 2013-05-31T11:51:03.413 回答
1

我认为这就是您要实现的目标

将 Div1 css 位置属性设置为相对。创建一个绝对位置的子 div。在子 div 中插入水印图像或文本。将所有内容放在父 div 中。将水印 div 置于所有内容之上（使用 z-index:1）。

希望这可以帮助

于 2013-05-31T11:49:25.187 回答