ホームページ > 記事 > ウェブフロントエンド > CSS で単語を画像に置き換える 9 つの方法についての簡単な説明

CSS で単語を画像に置き換える 9 つの方法についての簡単な説明

小云云オリジナル: 2017-12-09 10:26:351847ブラウズ

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

負のマージン

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

で

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

を繰り返さずに画像の背景を右揃えに設定します。したがって、高さを 0 に設定し、高さを padding-top に置き換えて、overflow:hidden を設定します。次に、spanタグを追加してテキスト内容を保存し、タグの幅と高さを0に設定することで、テキストを表示せずに背景のみを表示することができます

  <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にします

、次に、オーバーフローを非表示に設定します

テキストを透明に設定できます

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

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

疑似要素

疑似要素の前に使用し、コンテンツを画像のURLに設定し、h1要素にオーバーフロー非表示を設定します

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

正のインデント

テキストを設定します- indent:100% 親要素側の幅領域より右側の文字をインデントします。次に、white-space:nowrap と overflow:hidden を一緒に設定して、テキストの折り返しやオーバーフローを防ぎます。したがって、テキストコンテンツを非表示にします

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

フォントサイズ

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

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

CSS で単語を画像に置き換える 9 つの方法についての簡単な説明

関連記事