使用SVG或CSS来添加“水印”或覆盖到网页上的图像 [英] using SVG or CSS to add a "watermark" or overlay to an image on a web page

问题描述

如何在网页上显示的图片上添加CSS或SVG叠加层或水印？
我有一个缩略图网格，我要显示，并想突出其中一些特殊的注释或单词。

How could I add a CSS or SVG overlay or watermark on an image being displayed on a web page? I have a grid of thumbnails that I am displaying and would like to highlight some of them with special notes or words.

HTML 5和CSS3，但需要优雅地退化。

HTML 5 and CSS3 but would need to degrade gracefully. JQuery would be acceptable too.

推荐答案

如果我理解你的问题，你可以这样做。

If I understand what you're asking, you could do it this way.

假设您有以下HTML标记

Say you have the following HTML markup

<div class='imageholder'>
    <img src='img/1.png' alt=''>
    <div class='watermark'>WATERMARK</div>
</div>

您放置在.watermark div中的任何内容都会显示在图像底部，并覆盖在其上。

Anything you place in that .watermark div would display in the bottom of the image, overlayed onto it.

您的css看起来像这样

Your css would look like this

.imageholder{position:relative;}
.watermark
{
    position:absolute;
    bottom:0;
    background-color:rgba(0,0,0,.4);
}

在背景颜色上使用alpha将允许用户部分透过但仍允许您的文字可读。

Having an alpha on the background color would allow the user to partially see through it but still allow your text to be readable.

这篇关于使用SVG或CSS来添加“水印”或覆盖到网页上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！