如何使用純 CSS 和 HTML 覆蓋圖像/水印
[英]How to overlay an image/watermark with pure CSS and HTML
問題描述
是否有一種簡單的相對定位方法可以通過傳遞一個類來將透明的 PNG（或任何其他圖像）覆蓋在帶有 CSS 的圖像標簽上？
<img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo">
那么 CSS 可能與此類似（不起作用）：
.watermarked{
background-image: url("http://placehold.it/100x100/09f/fff.png");
position: relative;
left: 30px;
opacity: 0.5;
}
理想情況下，我將能夠在 CSS 中定義我的“水印”覆蓋圖像的路徑，然后我添加“水印”類的任何圖像都會使該圖像覆蓋在一些負相對定位的頂部。 它應該能夠應用於單個頁面上的多個圖像，因此單次使用 DIV 將不起作用。
顯然，這對保護底層圖像沒有任何作用……所以稱其為水印並不准確……更多的是臨時覆蓋。 我很驚訝沒有現成的答案，但我四處尋找並沒有在這里或谷歌上找到答案。
.watermarked { background-image: url("http://via.placeholder.com/100x100/09f/fff.png"); position: relative; left: 30px; opacity: 0.5; }
<div class="col-lg-3 col-md-6 mb-4"> <div class="card"> <img class="card-img-top watermarked" src="http://placehold.it/500x325" alt=""> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p> </div> </div> </div>
3 個解決方案
解決方案1
15 已采納 2018-01-21 10:20:39
如果您要使用僅使用 CSS 的解決方案，我建議您將要添加水印的圖像包裝在容器div ，然后我們可以添加一個:after偽元素，其中包含我們的水印。
理想的解決方案是將:after偽元素直接應用於img元素，但不幸的是，大多數瀏覽器不支持在img元素上使用:before或:after 。 如果是這樣，我們可以將.watermark直接應用於img標簽。
在下面的解決方案中，我們將一個:after偽元素覆蓋在整個圖像上，然后將水印徽標放置在左上角。
此解決方案的一個優點是:after元素覆蓋整個圖像，這會阻止用戶右鍵單擊並保存圖像（盡管這並不能阻止具有網絡經驗的任何人找到圖像 URL 以進行下載）。 因為:after元素覆蓋了整個圖像，我們還可以應用半透明背景來稍微遮擋水印圖像。
所以我們剩下這個解決方案：
.watermarked { position: relative; } .watermarked:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-image: url("http://placehold.it/100x100/09f/fff.png"); background-size: 100px 100px; background-position: 30px 30px; background-repeat: no-repeat; opacity: 0.7; }
<div class="watermarked"> <img src="http://placehold.it/500x325.jpg" alt="Photo"> </div>
解決方案2
0 2018-01-21 11:55:41
另一種方法是創建一個相對的div，放在頁面的flow中，先放主圖，然后在上面放水印。
<!Doctype>
<html>
<head>
<style>
.card
{
position: relative;
top: 0;
left: 0;
}
.watermark
{
position: absolute;
top: 60px;
left: 80px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img src="img/cardX.png" class="card"/>
<img src="img/watermark2.png" class="watermark"/>
</div>
</body>
</html>
或者您可以使用水印文本覆蓋您的圖像。 這可以通過 HTML 或 CSS 輕松完成。
HTML：
<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>
CSS 代碼較長，因為您需要定義類等並使用 :after 元素，如上述 Brett 所述。
.watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
解決方案3
0 2021-07-23 05:46:35
使用實際圖像作為背景圖像，然后無限重復使用標簽中的水印。 這使得在水印后面另存為背景圖像變得更加困難，但也阻止了爬蟲索引圖像。 如果您仍然希望抓取帶水印的照片，您只需在 .txt 文件中列出它們的 URL 並將其作為站點地圖提交。
如何在保持比例的同時在純HTML / CSS中調整圖像大小？
[英]How to resize an image in pure HTML/CSS while keeping its proportions?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.