css - 使用 SVG 或 CSS 向网页上的图像添加 "watermark"或叠加层

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

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

最佳答案

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

假设您有以下 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 将允许用户部分看穿它，但仍然允许您的文本可读。

关于css - 使用 SVG 或 CSS 向网页上的图像添加 "watermark"或叠加层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17747520/