Wasserzeichen"-Effekt mit CSS hinzufügen?

Question

Ich habe ein Bild in einem div. Ich brauche, um ein Wasserzeichen-Effekt, oder im Grunde ein anderes Bild, overtop das Bild der div hinzuzufügen. Wie kann ich dies mit css tun?

Beispiel-Code:

<div id="image">
</div>

css:

#image {
   background:url(images/images.png) no-repeat;
}

Answer 1

Dafür gibt es mindestens zwei Möglichkeiten, von denen eine bereits in der Antwort von @erenon angesprochen wurde.

Um Ihre Anforderungen zu erfüllen und ein Bild zu verwenden:

<div id="image">
    <img src="path/to/watermarking_image.png" alt="..." />
</div>

Mit dem folgenden CSS:

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image img {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

#image {
  /* the image you want to 'watermark' */
  height: 200px;
  /* or whatever, equal to the image you want 'watermarked' */
  width: 200px;
  /* as above */
  background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
}

#image img {
  /* the actual 'watermark' */
  position: absolute;
  top: 0;
  /* or whatever */
  left: 0;
  /* or whatever, position according to taste */
  opacity: 0.5;
  /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
  filter: alpha(opacity=50);
  /* for <= IE 8 */
}

<div id="image">
  <img src="https://www.davidrhysthomas.co.uk/linked/watermark.png" alt="..." />
</div>

Dies sollte in etwa das folgende Ergebnis liefern:

   +--------------+--------------+
   |              |              |
   | 'watermark'  |              |
   |              |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

Wenn Sie nur ein Wort als Wasserzeichen verwenden möchten, können Sie auch Wörter :

<div id="image">
    <p>Watermark text</p>
</div>

Und das folgende CSS:

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image p {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

#image {
  width: 200px;
  height: 200px;
  background-image: url(https://www.davidrhysthomas.co.uk/linked/astrid_avatar.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
}

#image p {
  /* the actual 'watermark' */
  position: absolute;
  top: 0;
  /* or whatever */
  left: 0;
  /* or whatever, position according to taste */
  opacity: 0.5;
  /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
  filter: alpha(opacity=50);
  /* for <= IE 8 */
}

<div id="image">
  <p>Watermark text</p>
</div>

Dies sollte in etwa das folgende Ergebnis liefern:

   +--------------+--------------+
   |              |              |
   |  watermark   |              |
   |    text      |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

Ich weiß, dass diese Frage wahrscheinlich zu Ihrer Zufriedenheit beantwortet wurde, aber ich hoffe, dass dies für Sie von Nutzen ist, wenn auch nur als allgemeine Information.

Aktualisiert, um eine SVG-Option hinzuzufügen, wobei zu beachten ist, dass in diesem Beispiel der "Wasserzeichen"-Text auswählbar ist und das SVG-Element inspiziert werden kann, um die Bild-URL abzurufen:

svg {
  width: 300px;
  height: 300px;
  border: 2px solid #000;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    /* adjusting the fill, colour and transparency,
       of the watermark text while the SVG is hovered */
    svg:hover .watermark {
      fill: #666f;
      font-size: 2.1em;
    }
    /* defining the default style of the watermark */
    .watermark {
      fill: #bbbb;
      font-size: 2em;
      font-family: Ubuntu, Calibri, sans-serif;
      font-weight: bold;
      transition: all 0.3s linear;
    }
  </style>
  <!-- the image that you want to be watermarked: -->
  <image xlink:href="http://www.davidrhysthomas.co.uk/linked/astrid_avatar.png" height="200px" width="200px" />
  <!-- the watermark text: -->
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="watermark">watermark</text>
</svg>

Answer 2

Sind Sie sicher, dass Sie das Wasserzeichen auf der Client-Seite einfügen wollen? Dadurch wird der ganze Zweck eines Wasserzeichens zunichte gemacht. Was Sie tun wollen, ist ein Bild, das bereits ein Wasserzeichen enthält, auf den Server zu stellen. Dazu müssen Sie serverseitigen Code schreiben.

Answer 3

Ihre Lösung:

CSS:

#watermark{
   background:url(images/watermark.png) no-repeat; 
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}
#image{
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

HTML:

<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>

Eine weitaus bessere Lösung:

Manche Leute können ein Overlay-Wasserzeichen nicht durchbrechen, aber manche schon. Es wird dringend empfohlen, ein serverseitiges Wasserzeichen zu verwenden, z. B. die Bibliothek imagemagick.

Answer 4

Sie könnten ein transparentes PNG verwenden, um zwei Bilder zu überlagern, aber Sie sollten dies wirklich auf dem Server tun, da clientbasierte Lösungen leicht zu überlisten sind und nicht wirklich etwas schützen.