Une brève discussion sur 9 façons de remplacer des mots par des images en CSS

Personne n'a mentionné la technologie consistant à remplacer les mots par des images en CSS 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 partagera avec vous des informations pertinentes sur 9 façons de remplacer des mots par des images en CSS. J'espère que cela pourra vous aider.

Masquage du texte

Dans la balise h1, ajoutez une balise span pour enregistrer le contenu du titre, puis définissez son style sur display : aucun

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

Indentation négative

En utilisant text-index:-9999px, une indentation négative aussi grande fait déplacer le texte vers un zone en dehors de la page

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

marge négative

en utilisant margin-left:-2000px, ce qui rend The Le modèle de boîte est décalé de 2 000 px vers la gauche et la largeur est définie sur 2 064 px, de sorte que seuls 64 px des 2 064 px soient affichés sur la page. Définissez l'arrière-plan de l'image pour qu'il soit aligné à 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 &#39;微软雅黑&#39;;
      margin-left:-2000px;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

sur le remplissage

car l'arrière-plan is Il 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 pouvez afficher uniquement le fond 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 &#39;微软雅黑&#39;;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

0 largeur et hauteur

par ajouter une étiquette span pour enregistrer le contenu du texte, définir la largeur et la hauteur de l'étiquette sur 0, puis définir le débordement pour qu'il soit masqué

  <style>
    h1 {
      width: 64px;
      height: 64px;
      background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
      font: 12px/1 &#39;微软雅黑&#39;;
    }
    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 taille de la police sur 1px, ce qui réduit 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 de l'image et définissez le masquage du débordement sur l'élément h1

  <style>
    h1 {
      width: 64px;
      height: 64px;
      overflow: hidden;
      font: 12px/1 &#39;微软雅黑&#39;;
    }
    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 zone de largeur de ​​l'élément parent. Ensuite, définissez white-space:nowrap et overflow:hidden ensemble 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 &#39;微软雅黑&#39;;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Taille de la police

En définissant font-size:0, la police peut être modifié Réglez la taille sur 0

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

Recommandations associées :

Comment définir la police du texte couleur de CSS

Comment utiliser le mélange d'images CSS3

Comment utiliser CSS3 pour créer des effets d'icônes

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!