使用SVG或CSS爲網頁上的圖像添加「水印」或覆蓋圖

Question

如何在網頁上顯示的圖像上添加CSS或SVG覆蓋圖或水印？ 我有我正在顯示的縮略圖網格，並希望用特殊註釋或文字突出顯示其中的一些。

HTML 5和CSS3，但將需要優雅地退化。 JQuery也可以接受。

Answer 1

如果我明白你在問什麼，你可以這樣做。

假設你有以下的HTML標記您在.watermark格放置

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

任何將在圖像的底部，覆蓋在它顯示。

你的CSS是這樣的

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

有背景顏色的字母將允許用戶以部分看透它，但仍然允許你的文字是可讀的。