html - 在css中创建十字图像水印

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>