Multiple ways to replace words with images in CSS

This time I will bring you various methods of using images to replace words in CSS. What are the precautions for using images to replace words in CSS? The following is a practical case, let’s take a look.

The previous words

No one has mentioned the CSS technology of replacing words with pictures 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 introduce in detail 9 ways to replace words with images in CSS

hidden text

In the h1 tag, add a span tag to save the title content, and then add it The style is set to display:none

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

negative indent

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

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

Negative margin

Offset the box model 2000px left by using

margin-left:-2000px, then Set the width to 2064px so that only 64px of the 2064px is displayed on the page. Set the background of the image to 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 '微软雅黑';
      margin-left:-2000px;
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

padding

because the background is displayed in the padding-box area, and the text is displayed in 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 '微软雅黑';
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

0 width and height

Save the text content by adding a span tag and set the width and height of the tag is 0, 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 '微软雅黑';
    }
    span{display:block;width: 0;height:0;overflow:hidden;}
  </style>
  <h1><span>小火柴的蓝色理想</span></h1>

Text transparent

Set the color of the text to transparent, and set the font-size to 1px, that is, reduce the line height Impact

  <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 '微软雅黑';
    }
    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. Thereby 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 '微软雅黑';
    }
  </style>
  <h1>小火柴的蓝色理想</h1>

Font size

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

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

I believe I saw it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the CSS weird box model and standard box model

Detailed explanation of the transform function in CSS3

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