Mehrere Möglichkeiten, Wörter in CSS durch Bilder zu ersetzen

Dieses Mal stelle ich Ihnen verschiedene Methoden zur Verwendung von Bildern zum Ersetzen von Wörtern in CSS vor. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Bildern zum Ersetzen von Wörtern in CSS?

Was ich vorher gesagt habe

Niemand hat schon lange die CSS-Technologie zum Ersetzen von Wörtern durch Bilder erwähnt. Dabei handelt es sich um eine Technik, die Bilder verwendet, um Textelemente innerhalb von h1-Tags zu ersetzen und so der Seite ein Gleichgewicht zwischen Design und Zugänglichkeit zu verleihen. In diesem Artikel werden 9 Möglichkeiten zum Ersetzen von Wörtern durch Bilder in CSS ausführlich vorgestellt.

Text ausblenden

Fügen Sie im h1-Tag ein Span-Tag hinzu, um den Titelinhalt zu speichern. und dann hinzufügen Der Stil ist auf display:none eingestellt

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

Negativer Einzug

Durch die Verwendung von text-index:-9999px wird ein relativ großer negativer Einzug verwendet bewirkt, dass der Text außerhalb der Seite verschoben wird

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

negativer Rand

Verschieben Sie das Boxmodell nach links, indem Sie margin-left verwenden:- 2000px Verschieben Sie es um 2000px und stellen Sie dann die Breite auf 2064px ein, sodass nur der 64px-Teil von 2064px auf der Seite angezeigt wird. Stellen Sie den Hintergrund des Bildes auf rechtsbündig ein, ohne

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

beim Auffüllen

zu wiederholen, da der Hintergrund im Bereich des Auffüllfelds und der Text angezeigt wird wird im Inhaltsfeldbereich angezeigt. Setzen Sie also height auf 0, ersetzen Sie height durch padding-top und legen Sie overflow:hidden fest. Dann können Sie nur den Hintergrund anzeigen, ohne den Text

  <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 Breite und Höhe

anzuzeigen. Speichern Sie den Textinhalt, indem Sie ein Span-Tag hinzufügen und die Breite ändern des Tags Hoch auf 0 setzen, dann Überlauf auf Ausblenden einstellen

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

Text transparent

Setzen Sie die Farbe des Textes auf transparent und stellen Sie die Schriftart ein. Größe auf 1 Pixel, d. h. Reduzieren Sie den Einfluss der Zeilenhöhe

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

Pseudoelement

Verwenden Sie das vorherige Pseudoelement und setzen Sie den Inhalt auf die URL des Bild und stellen Sie das Ausblenden des Überlaufs für das h1-Element ein

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

Positiver Einzug

Setzen Sie text-indent:100% ein, um den Text rechts von der Breite einzurücken Bereich des übergeordneten Elements. Legen Sie dann white-space:nowrap und overflow:hidden fest, um zu verhindern, dass der Text umgebrochen wird und überläuft. Dadurch wird der Textinhalt ausgeblendet

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

Schriftgröße

Durch die Einstellung von „font-size:0“ können Sie die Schriftgröße auf 0 setzen

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das CSS-Weird-Box-Modell und das Standard-Box-Modell

Detaillierte Erläuterung der Transformationsfunktion in CSS3

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten, Wörter in CSS durch Bilder zu ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!