如何用纯CSS和HTML覆盖图像/水印 [英] How to overlay an image/watermark with pure CSS and HTML

问题描述

有没有一种相对位置的简单方法，只需通过一个类就可以在CSS图像标签上覆盖透明的PNG(或其他图像)?

Is there an easy way with relative positioning to overlay a transparent PNG (or any other image) over an image tag with CSS just by passing a class?

 <img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo">

然后CSS可能与此类似(不起作用):

Then the CSS might be similar to this (not working):

.watermarked{
  background-image: url("http://placehold.it/100x100/09f/fff.png");
  position: relative;
  left: 30px;
  opacity: 0.5;
}

理想情况下，我将能够在CSS内定义水印"覆盖图像的路径，然后添加水印"类的任何图像都可以将该图像叠加在顶部，并具有一些相对的相对位置.应该可以将其应用于单个页面上的多个图像，因此一次性使用DIV将不起作用.

Ideally, I would be able to define the path of my "watermark" overlay image within CSS and then any image that I add "watermarked" class to would get this image overlaid on top with some negative relative positioning. It should be able to be applied to multiple images on a single page, so a single use DIV will not work.

很明显，这并不能保护底层图像...因此称其为水印并不是真正准确的...更多的是临时覆盖.令我惊讶的是，答案不易获得，但我四处寻找，但在这里或Google上都找不到答案.

Obviously, this does NOT do anything to protect the underlying image...so to call it a watermark is not really accurate...more of a temporary overlay. I am amazed that an answer is not readily available but I have poked around and not found an answer here or on google.

.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伪元素.

If you're going for a CSS-only solution, I'd recommend wrapping the image you want to watermark in a container div, which we can then add an :after pseudo-element containing our watermark.

理想的解决方案是将:after伪元素直接应用于img元素，但是不幸的是，大多数浏览器不支持在img元素上使用:before或:after.如果是这样，我们可以将.watermark直接应用于img标记.

The ideal solution would be to apply the :after pseudo-element directly to the img element, but unfortunately most browsers don't support using :before or :after on img elements. If so we could have applied the .watermark directly to the img tag.

在下面的解决方案中，我们在整个图像上覆盖一个:after伪元素，然后将水印徽标放在左上角.

In the solution below we're overlaying an :after pseudo-element over the entire image, then placing the watermark logo in the top-left corner.

该解决方案的一个优点是:after元素覆盖了整个图像，这可以防止用户右键单击并保存图像(尽管这并不能阻止具有一定网络经验的人找到图像URL来).下载它).因为:after元素覆盖了整个图像，所以我们还可以应用半透明的背景来稍微模糊水印图像.

One advantage this solution has is the :after element covers the entire image, which prevents users from right-clicking and saving the image (though this doesn't prevent anyone with a bit of web experience from finding the image URL to download it). Because the :after element covers the entire image we could also apply a semi-transparent background to slightly obscure the watermarked image.

所以我们剩下这个解决方案了:

So we're left with this solution:

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

这篇关于如何用纯CSS和HTML覆盖图像/水印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！