html背景水印效果,用CSS添加“水印”效果？

至少有两种方法可以做到这一点,其中一种被@ erenon的答案所触动.

满足您的要求并使用图像：

使用以下CSS：

#image {

/* the image you want to 'watermark' */

height: 200px; /* or whatever, equal to the image you want 'watermarked' */

width: 200px; /* as above */

background-image: url(path/to/image/to/be/watermarked.png);

background-position: 0 0;

background-repeat: no-repeat;

position: relative;

}

#image img {

/* the actual 'watermark' */

position: absolute;

top: 0; /* or whatever */

left: 0; /* or whatever, position according to taste */

opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */

filter:alpha(opacity=50); /* for <= IE 8 */

}