A brief discussion on 9 ways to replace words with images in CSS

No one has mentioned the technology of replacing images with words in CSS for a long time. It is a technique that uses images to replace text elements within h1 tags, giving the page a balance between design and accessibility. This article will share with you relevant information on 9 ways to replace words with pictures in CSS. I hope it can help you.

Text hiding

In the h1 tag, add a span tag to save the title content, and then set its style to 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>

Negative indent

By using text-index:-9999px, such a relatively large negative indent moves the text to the page Area outside

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

Negative margin

Make the box model left by using margin-left:-2000px Offset by 2000px and set the width to 2064px so that only 64px of the 2064px is displayed on the page. Set the background of the image to be right aligned without repeating

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

padding

because the background is displayed on in the padding-box area, while the text is displayed in the content-box area. So, set height to 0, replace height with padding-top, and set overflow:hidden. Then, you can only display the background without displaying the 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 width and height

By adding a span tag Save the text content, set the width and height of the label to 0, and then set the overflow to hide

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

The text is transparent

Set the text color to transparent and set the font-size to 1px, which reduces the impact of line height

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

Use the before pseudo-element, set content to the URL of the image, and set overflow hiding on the h1 element

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

Positive Indent

Set text-indent:100% to indent the text to the right of the width area of ​​the parent element. Then set white-space:nowrap and overflow:hidden together to prevent the text from wrapping and overflowing. Thus hiding the text content

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

Font size

By setting font-size:0, the font size can be set For 0

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

Related recommendations:

How to set the text font color of CSS

How to use CSS3 image mixing

How to use css3 to make icon effects

The above is the detailed content of A brief discussion on 9 ways to replace words with images in CSS. For more information, please follow other related articles on the PHP Chinese website!