Eine kurze Diskussion über 9 Möglichkeiten, Wörter in CSS durch Bilder zu ersetzen

Niemand hat schon lange die Technologie des Ersetzens von Wörtern durch Bilder in CSS 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 erhalten Sie relevante Informationen zu 9 Möglichkeiten, Wörter in CSS durch Bilder zu ersetzen. Ich hoffe, er kann Ihnen helfen.

Text ausblenden

Fügen Sie im h1-Tag ein span-Tag hinzu, um den Titelinhalt zu speichern, und legen Sie dann den Stil auf display:none

fest

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

Negative Einrückung

Durch die Verwendung von text-index:-9999px führt eine so relativ große negative Einrückung dazu, dass der Text zu einem verschoben wird Bereich außerhalb der Seite

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

negativer Rand

durch Verwendung von margin-left:-2000px, wodurch The Das Box-Modell ist um 2000 Pixel nach links versetzt und die Breite ist auf 2064 Pixel eingestellt, sodass nur 64 Pixel der 2064 Pixel auf der Seite angezeigt werden. Stellen Sie den Hintergrund des Bildes so ein, dass er rechtsbündig ist, ohne

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

beim Auffüllen

für den Hintergrund zu wiederholen ist Es wird im Füllfeldbereich angezeigt und der Text wird im Inhaltsfeldbereich angezeigt. Setzen Sie also height auf 0, ersetzen Sie height durch padding-top und setzen Sie overflow:hidden. 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 &#39;微软雅黑&#39;;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

0 Breite und Höhe

anzuzeigen Fügen Sie eine Span-Beschriftung hinzu, um den Textinhalt zu speichern, und legen Sie die Breite und Höhe der Beschriftung auf 0 fest. Stellen Sie dann den Überlauf so ein, dass er ausgeblendet wird

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

Text transparent

Stellen Sie die Farbe des Texts auf transparent und die Schriftgröße auf 1 Pixel ein, wodurch die Auswirkung der Zeilenhöhe verringert wird

  <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 Before-Pseudoelement, legen Sie den Inhalt auf die URL des Bildes fest und legen Sie das Ausblenden des Überlaufs für das h1-Element fest

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

Positiver Einzug

Setzen Sie text-indent:100% ein, um den Text rechts vom Breitenbereich von einzurücken ​​das übergeordnete Element. Legen Sie dann „white-space:nowrap“ und „overflow:hidden“ zusammen 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 &#39;微软雅黑&#39;;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Schriftgröße

Durch Festlegen von „font-size:0“ wird die Schriftart eingestellt kann geändert werden Stellen Sie die Größe auf 0 ein

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

Verwandte Empfehlungen:

So legen Sie die Textschriftart fest Farbe von CSS

So verwenden Sie CSS3-Bildmischung

So verwenden Sie CSS3 zum Erstellen von Symboleffekten

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über 9 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!