添加“水印” CSS效果? [英] Add "Watermark" effect with CSS?
本文介绍了添加“水印” CSS效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在div中有一个图片。我需要添加水印效果,或基本上另一个图像,over图像的div。我怎么能这样用css?
I have an image in a div. I need to add a watermark effect, or basically another image, overtop the image the div. How can I do this with css?
示例代码:
<div id="image">
</div>
css:
#image {
background:url(images/images.png) no-repeat;
}
推荐答案
要满足您的要求并使用图片:
To meet your requirements and use an image:
<div id="image">
<img src="path/to/watermarking_image.png" alt="..." />
</div>
使用以下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' | |
| | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
另一种方法,假设你想要'watermark' 一个字是使用字:
The alternative way, assuming all you want to 'watermark' with is 'one word,' is to use words:
<div id="image">
<p>Watermark text</p>
</div>
以及以下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, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}
+--------------+--------------+
| | |
| watermark | |
| text | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
我意识到这个问题可能是你的满意答案,希望这对你有一些用处,即使只作为一般信息。
I realise that this question was probably answered to your satisfaction, but I hope this is of some use to you, even only as general information.
这篇关于添加“水印” CSS效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文