用 CSS 添加“水印”效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1625706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add "Watermark" effect with CSS?
提问by Zach Smith
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 中有一个图像。我需要添加一个水印效果，或者基本上是另一个图像，在 div 的图像之上。我怎样才能用 css 做到这一点？
Example code:
示例代码：
<div id="image">
</div>
css:
css：
#image {
background:url(images/images.png) no-repeat;
}
回答by David says reinstate Monica
There are at least two ways to do this, one of which has sort of been touched-on by @erenon's answer.
至少有两种方法可以做到这一点，@erenon 的回答涉及其中一种方法。
To meet your requirements and use an image:
为了满足您的要求并使用图像：
<div id="image">
<img src="path/to/watermarking_image.png" alt="..." />
</div>
With the following CSS:
使用以下 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 */
}
#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(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.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 */
}<div id="image">
<img src="https://www.davidrhysthomas.co.uk/linked/watermark.png" alt="..." />
</div>This should generate something like the following:
这应该会生成如下内容：
+--------------+--------------+
| | |
| 'watermark' | |
| | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
The alternative way, assuming all you want to 'watermark' with is 'one word,' is to use words:
另一种方法，假设你想要“水印”的只是“一个词”，那就是使用words：
<div id="image">
<p>Watermark text</p>
</div>
And the following CSS:
以及以下 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 */
}
#image {
width: 200px;
height: 200px;
background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.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 */
}<div id="image">
<p>Watermark text</p>
</div>This should generate something like the following:
这应该会生成如下内容：
+--------------+--------------+
| | |
| 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.
我知道这个问题的回答可能让您满意，但我希望这对您有用，即使只是作为一般信息。
Updated to add an SVG option, though do bear in mind that in this example the 'watermark' text is selectable and the SVG element can be inspected to retrieve the image URL:
更新以添加 SVG 选项，但请记住，在此示例中，“水印”文本是可选的，并且可以检查 SVG 元素以检索图像 URL：
svg {
width: 300px;
height: 300px;
border: 2px solid #000;
}<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
/* adjusting the fill, colour and transparency,
of the watermark text while the SVG is hovered */
svg:hover .watermark {
fill: #666f;
font-size: 2.1em;
}
/* defining the default style of the watermark */
.watermark {
fill: #bbbb;
font-size: 2em;
font-family: Ubuntu, Calibri, sans-serif;
font-weight: bold;
transition: all 0.3s linear;
}
</style>
<!-- the image that you want to be watermarked: -->
<image xlink:href="http://www.davidrhysthomas.co.uk/linked/astrid_avatar.png" height="200px" width="200px" />
<!-- the watermark text: -->
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="watermark">watermark</text>
</svg>回答by Anton Gogolev
Are you sure you want to do watermarking on client-side? Doing so basically defeats the whole purpose of having a watermark. What you'd want to do is to server an image which already contains a watermark. Do to so, you'll have to write server-side code.
您确定要在客户端进行水印吗？这样做基本上违背了拥有水印的全部目的。您想要做的是为已经包含水印的图像提供服务器。这样做，您将不得不编写服务器端代码。
回答by erenon
Your solution:
您的解决方案：
CSS:
CSS：
#watermark{
background:url(images/watermark.png) no-repeat;
width: 100px;
height: 100px;
position: relative;
top: 0;
left: 0;
}
#image{
width: 100px;
height: 100px;
position: relative;
top: 0;
left: 0;
}
HTML:
HTML：
<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>
Far better solution:
更好的解决方案：
Some people couldn't break through an overlay watermark, but some people can. It's highly recommended to use something server side watermarking, e.g: the imagemagick lib.
有些人无法突破覆盖水印，但有些人可以。强烈建议使用服务器端水印，例如：imagemagick lib。
回答by Norman
You could potentially use a transparent PNG to overlay two images, but you really do want to do this on the server since client-based solutions are easily defeated and don't really protect anything.
您可能会使用透明的 PNG 来覆盖两个图像，但您确实希望在服务器上执行此操作，因为基于客户端的解决方案很容易被击败并且并不能真正保护任何东西。
