gpt4 book ai didi

css - 用CSS添加 "Watermark"效果?

转载 作者:技术小花猫 更新时间:2023-10-29 10:19:21 27 4
gpt4 key购买 nike

我在 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
| /\ / \ || |
|/ \________/ \_()||_()(|
+-----------------------------+

另一种方法,假设您想要“水印”的只是“一个词”,那就是使用:

<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>

关于css - 用CSS添加 "Watermark"效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1625706/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com