Plusieurs façons de remplacer des mots par des images en CSS

Cette fois, je vais vous présenter différentes méthodes d'utilisation d'images pour remplacer des mots en CSS. Quelles sont les précautions lors de l'utilisation d'images pour remplacer des mots en CSS. Voici des cas pratiques, jetons un coup d'oeil.

Ce que j'ai dit avant

Personne n'a mentionné la technologie CSS consistant à remplacer les mots par des images depuis longtemps. Il s'agit d'une technique qui utilise des images pour remplacer les éléments de texte dans les balises h1, donnant à la page un équilibre entre conception et accessibilité. Cet article présentera en détail 9 façons de remplacer des mots par des images en CSS

Masquer le texte

Dans la balise h1, ajoutez une balise span pour enregistrer le contenu du titre, puis ajoutez-le. Le style est défini sur display:none

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 '微软雅黑';
    }
    span {
      display: none;
    }
  </style>
  <h1>
    <span>小火柴的蓝色理想</span>
  </h1>

Retrait négatif

En utilisant text-index:-9999px, un retrait négatif aussi important fait déplacer le texte en dehors de la page

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 '微软雅黑';
      text-indent:-9999px;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

marge négative

Décalez le modèle de boîte vers la gauche en utilisant marge-gauche : - 2000px Déplacez-le de 2000px, puis définissez la largeur sur 2064px, de sorte que seule la partie 64px du 2064px soit affichée sur la page. Alignez l'arrière-plan de l'image à droite sans répéter

  <style>
    h1 {
      width: 2064px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico) right no-repeat;
      font: 12px/1 '微软雅黑';
      margin-left:-2000px;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

sur le remplissage

car l'arrière-plan est affiché dans la zone de remplissage et le texte est affiché dans la zone de contenu. Alors, définissez la hauteur sur 0, remplacez la hauteur par padding-top et définissez overflow:hidden. Ensuite, vous ne pouvez afficher que l'arrière-plan sans afficher le texte

  <style>
    h1 {
      width: 64px;
      padding-top: 64px;
      height:0;
      overflow:hidden;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 '微软雅黑';
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

0 largeur et hauteur

Enregistrez le contenu du texte en ajoutant une balise span et modifiez la largeur de la balise Réglez haut sur 0, puis définissez le débordement pour masquer

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 '微软雅黑';
    }
    span{display:block;width: 0;height:0;overflow:hidden;}
  </style>
  <h1><span>小火柴的蓝色理想</span></h1>

Texte transparent

Définissez la couleur du texte sur transparent et définissez la police- taille à 1px, c'est-à-dire Réduire l'impact de la hauteur de ligne

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      color:transparent;
      font-size:1px;
      }
  </style>
  <h1>小火柴的蓝色理想</h1>

pseudo-élément

Utilisez le pseudo-élément avant, définissez le contenu sur l'URL du image, et définissez le débordement en se cachant sur l'élément h1

  <style>
    h1 {
      width: 64px;
      height: 64px;
      overflow: hidden;
      font: 12px/1 '微软雅黑';
    }
    h1:before {
      content: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      display: block;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Retrait positif

Définissez text-indent:100% pour mettre le texte en retrait à droite de la largeur zone de l'élément parent. Ensuite, définissez white-space:nowrap et overflow:hidden pour empêcher le texte de s'enrouler et de déborder. Masquant ainsi le contenu du texte

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      font: 12px/1 '微软雅黑';
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Taille de la police

En définissant font-size:0, vous pouvez définir la taille de la police sur 0

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font-size:0;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le modèle de boîte bizarre CSS et le modèle de boîte standard

Explication détaillée de la fonction de transformation en CSS3

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!