CSS で単語を画像に置き換える複数の方法

今回は、CSS で画像を使用して単語を置換するさまざまな方法を紹介します。実際のケースを見てみましょう。

前述したように

画像を単語に置き換えるCSS技術は長い間言及されていませんでした。これは、h1 タグ内のテキスト要素を画像を使用して置き換え、ページにデザインとアクセシビリティのバランスを与える手法です。この記事ではCSSで単語を画像に置き換える9つの方法を詳しく紹介します

文字非表示

h1タグにspanタグを追加してタイトル内容を保存し、スタイルをdisplay:noneに設定します

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

負の縮小 text-index:-9999px を使用した

で、このような比較的大きな負のインデントで、テキストをページ外の領域に移動します

  <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 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>

負のマージン

を使用した

margin-left

:- 2000px、ボックス モデルを左に 2000px オフセットし、幅を 2064px に設定して、2064px のうち 64px だけがページに表示されるようにします。背景はパディングボックス領域に表示され、テキストはコンテンツボックス領域に表示されるため、

  <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 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>

でパディング

を繰り返さずに画像の背景を右揃えに設定します。したがって、高さを 0 に設定し、高さを

padding-top

に置き換えて、overflow:hidden を設定します。次に、テキストを表示せずに背景のみを表示することができます

  <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 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>

幅と高さを0にします

spanタグを追加してテキストコンテンツを保存し、タグの幅と高さを0に設定し、オーバーフローを隠す

  <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 id="span-小火柴的蓝色理想-span"><span>小火柴的蓝色理想</span></h1>

テキストは透明です

テキストの色を透明に設定し、フォントサイズを1pxに設定します。これにより、行の高さの影響が軽減されます

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

疑似要素

以前の疑似要素を使用しますh1 要素にコンテンツを画像の URL に設定します

  <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 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>

正のインデント

text-indent:100% を設定して、テキストを幅領域の右側にインデントします。親要素。次に、

white-space

:nowrap と overflow:hidden を設定して、テキストの折り返しやオーバーフローを防ぎます。これにより、テキストの内容が非表示になります

  <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 id="小火柴的蓝色理想">小火柴的蓝色理想</h1>

フォントサイズ

font-size:0 を設定すると、フォントサイズを 0 に設定できます

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

この記事の事例を読んだ後は、方法をマスターしたと思います。エキサイティングな情報、php 中国語のウェブサイトに注目してください。その他の関連記事!

推奨読書:

CSSの変なボックスモデルと標準のボックスモデルの使い方

CSS3のtransform関数の詳しい説明

以上がCSS で単語を画像に置き換える複数の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。