在css中创建一个十字图像水印 [英] Create a Cross image watermark in css

问题描述

我的需要是创建一个像图像中显示的十字图像。 Div 1没有固定的高度，它会改变一些时间。

那么如何在Div 1中创建一个十字水印？

My need is to create a cross image that show like in the image. The Div 1 has no fixed height it will vary some times.
Then how can I create a cross watermark inside Div 1?

我试过了

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

}

推荐答案

向图像添加包装并使用后选择器。

You could add a wrapper to the images and use an after selector.

参与演示

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>

这篇关于在css中创建一个十字图像水印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！