Question

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

我试过像

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

}

Answer 1

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

SEE DEMO

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>

Answer 2

我认为这是你想要实现的目标

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

希望这有帮助

在css中创建十字图像水印

2 个答案: