有没有一种简单的方法可以通过相对定位将透明 PNG（或任何其他图像）覆盖在带有 CSS 的图像标签上，只需传递一个类？
<img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo">
那么 CSS 可能与此类似（不起作用）：
.watermarked{
background-image: url("http://placehold.it/100x100/09f/fff.png");
position: relative;
left: 30px;
opacity: 0.5;
}
理想情况下，我能够在 CSS 中定义“水印”叠加图像的路径，然后我添加“水印”类的任何图像都会将该图像叠加在具有一些负相对定位的顶部。它应该能够应用于单个页面上的多个图像，因此单次使用 DIV 将不起作用。
显然，这对保护底层图像没有任何作用……所以称其为水印并不准确……更多的是临时覆盖。我很惊讶，答案并不容易获得，但我四处寻找，但没有在这里或谷歌上找到答案。
.watermarked {
background-image: url("http://via.placeholder.com/100x100/09f/fff.png");
position: relative;
left: 30px;
opacity: 0.5;
}
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top watermarked" src="http://placehold.it/500x325" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
</div>
</div>
如果您想要仅使用 CSS 的解决方案，我建议将要加水印的图像包装在容器中div，然后我们可以添加一个:after包含我们的水印的伪元素。
理想的解决方案是应用:after伪元素直接img元素，但不幸的是大多数浏览器不支持使用:before or :after on img元素。如果是这样，我们可以应用.watermark直接到img tag.
在下面的解决方案中，我们覆盖了:after伪元素覆盖整个图像，然后将水印徽标放置在左上角。
该解决方案的优点之一是:after元素覆盖了整个图像，这会阻止用户右键单击并保存图像（尽管这并不妨碍任何有一点网络经验的人找到图像 URL 来下载它）。因为:after元素覆盖整个图像，我们还可以应用半透明背景来稍微遮挡水印图像。
所以我们只剩下这个解决方案：
.watermarked {
position: relative;
}
.watermarked:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url("http://placehold.it/100x100/09f/fff.png");
background-size: 100px 100px;
background-position: 30px 30px;
background-repeat: no-repeat;
opacity: 0.7;
}
<div class="watermarked">
<img src="http://placehold.it/500x325.jpg" alt="Photo">
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
