web-dev-qa-db-ja.com

純粋なCSSとHTMLで画像/透かしをオーバーレイする方法

クラスを渡すだけで、CSSを使用して画像タグの上に透明なPNG（またはその他の画像）をオーバーレイする相対配置の簡単な方法はありますか？

 <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内で「透かし」オーバーレイ画像のパスを定義し、次に「透かし」クラスを追加してこの画像を負の相対位置でオーバーレイする画像を定義できます。 1ページの複数の画像に適用できる必要があるため、1回の使用で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>
htmlcssimageoverlaywatermark
2
techtheatre

CSSのみのソリューションを使用する場合は、透かしを入れる画像をコンテナdivでラップすることをお勧めします。これにより、透かしを含む:after疑似要素を追加できます。

理想的な解決策は、:after疑似要素をimg要素に直接適用することですが、残念ながら、ほとんどのブラウザはimg要素での:beforeまたは:afterの使用をサポートしていません。もしそうなら、.watermarkをimgタグに直接適用することができます。

以下のソリューションでは、画像全体に:after疑似要素をオーバーレイしてから、透かしのロゴを左上隅に配置しています。

このソリューションの利点の1つは、:after要素が画像全体をカバーすることです。これにより、ユーザーが画像を右クリックして保存することができなくなります（ただし、Webの経験が少しある人でもダウンロードする画像の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>
3
Brett DeWoody

もう1つの方法は、相対divを作成してページのフローに配置し、メイン画像を最初に配置してから、透かしを上に配置することです。

<!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>

または、 overlay 透かしテキスト付きの画像を使用することもできます。これは、HTMLまたはCSSを使用して簡単に実行できます。

HTML：

<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>

クラスなどを定義し、上記のBrettのように：after要素を使用する必要があるため、CSSコードは長くなります。

.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;
}
0
Ben Schmeltzer