Maison > interface Web > tutoriel CSS > le corps du texte

ajouter un filigrane à l'image avec CSS

王林
Libérer: 2020-10-26 16:13:15
avant
4777 Les gens l'ont consulté

ajouter un filigrane à l'image avec CSS

Objectif :

Ajouter un filigrane à certaines images.

(Recommandation vidéo d'apprentissage : Tutoriel vidéo CSS)

Zone d'affichage des images et des filigranes

<div class="watermark-image"></div>
Copier après la connexion

Style

.watermark-image {
  position: relative;

  width: 300px;
  height: 300px;

  background: url(&#39;https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489746806388&di=68436cfc9319b2f3afeffa9a984a2dc2&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201605%2F19%2F20160519224441_VfMWR.thumb.700_0.jpeg&#39;) no-repeat;
  background-size: 300px;

  border: 1px dotted #f00;
}

.watermark-image:before {
  content: "Message here.";
  font-size: 21pt;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -80px;

  background-color: rgba(255, 255, 0, 0.7);
  -webkit-transform:rotate(-45deg);
}
Copier après la connexion

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal