我在div中有一张图片。我需要在div的图像上方添加水印效果,或者基本上是另一个图像。如何使用CSS做到这一点?
示例代码:
<div id="image">
</div>
css:
#image {
background:url(images/images.png) no-repeat;
}
至少有两种方法可以做到这一点,@ erenon的回答已触及了其中一种。
为了满足您的要求并使用图像:
<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 */
}
#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>
这将生成类似以下内容的内容:
+--------------+--------------+
| | |
| 'watermark' | |
| | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
另一种方法是,假设您要对所有水印进行“水印”操作,就是使用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 */
}
#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>
这将生成类似以下内容的内容:
+--------------+--------------+
| | |
| watermark | |
| text | __ |
+--------------+ / \ |
| ( ) |
| /\ \ / |
| / \ || | <-- Picture. Of...something. O_o
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+
我意识到这个问题可能会得到您的满意答复,但我希望这对您有所帮助,即使只是作为一般信息。
已更新为添加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>
您确定要在客户端加水印吗?这样做基本上会破坏拥有水印的整个目的。您要做的是将已经包含水印的图像服务器化。为此,您必须编写服务器端代码。
#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;
}
<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>
某些人无法突破重叠水印,但有些人可以。强烈建议使用服务器端水印,例如imagemagick lib。
您可能会使用透明的PNG覆盖两个图像,但是您确实希望在服务器上执行此操作,因为基于客户端的解决方案很容易被破坏,并且实际上并不能保护任何内容。