css - 使用 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 将允许用户部分看到它，但仍然允许您的文本可读。