使用SVG或CSS为网页上的图像添加“水印”或叠加层

Question

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

HTML 5和CSS3，但需要优雅地降级。 JQuery也是可以接受的。

Answer 1

如果我明白你在问什么，你就可以这样做。

假设您有以下HTML标记

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

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

你的css看起来像这样

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

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