这篇博客介绍了两种使用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 */
}
这应该产生如下所示：
+--------------+--------------+
| | |
| 'watermark' | |
| | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || |
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
另一种方式,假设你所有的“水印”都是“一个字”,就是使用单词：
Watermark text
和以下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 p {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever,IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}
这应该产生如下所示：
+--------------+--------------+
| | |
| watermark | |
| text | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || |
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
我意识到这个问题可能是您的满意答案,但我希望这对您有用,即使只是一般信息.
扫一扫
1047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
