On the 9 ways of changing the word in CSS with graphs

CSS with a picture of the technology, for a long time no one mentioned. It is a technique for replacing text elements with images within the H1 tag, which balances the design and accessibility of the page. This article will share with you CSS 9 ways to change the word of the relevant information, hope to help everyone.

Text hiding

In the H1 tab, 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 ' Microsoft Jas Black ';    }    span {      display:none;    }  </style>  

Negative indent

By using text-index:-9999px, such a large negative indentation, so that the text moves beyond the page area


  <style>    H1 {      width:64px;      height:64px;      Background:url (Https://static.xiaohuochai.site/icon/icon_64.ico);      FONT:12PX/1 ' Microsoft Jas Black ';      text-indent:-9999px;    }  </style>  

Negative margin

By using margin-left:-2000px, you offset the box model to the left by 2000px, and then set the width to 2064px, so that only the 64px portion of 2064px is displayed on the page. Set the background of the picture to be right-aligned and not repeat


  <style>    H1 {      width:2064px;      height:64px;      Background:url (Https://static.xiaohuochai.site/icon/icon_64.ico) right no-repeat;      FONT:12PX/1 ' Microsoft Jas Black ';      margin-left:-2000px;    }  </style>  

On padding

Because the background is displayed in the Padding-box area, the text is displayed in the Content-box area. So, set height to 0, replace height with padding-top, and set Overflow:hidden. , you can display only the background without displaying 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 ' Microsoft Jas Black ';    }  </style>  

0 Wide Height

Save the text content by adding a span label, set the label's width height 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 ' Microsoft Jas Black ';    }    Span{display:block;width:0;height:0;overflow:hidden;}  </style>  

Text transparency

Set the text color to transparent and set Font-size to 1px, which reduces the effect of row height


  <style>    H1 {      width:64px;      height:64px;      Background:url (Https://static.xiaohuochai.site/icon/icon_64.ico);      color:transparent;      font-size:1px;      }  </style>  

Pseudo element

Using the before pseudo-element, the content is set to the URL of the picture, and overflow hiding is set on the H1 element


  <style>    H1 {      width:64px;      height:64px;      Overflow:hidden;      FONT:12PX/1 ' Microsoft Jas Black ';    }    H1:before {      content:url (https://static.xiaohuochai.site/icon/icon_64.ico);      Display:block;    }  </style>  

Positive indent

Sets the text-indent:100% to indent the text to the right of the width area of the parent element. Then mate sets White-space:nowrap and Overflow:hidden so that the text does not wrap and overflows to hide. Thus hiding 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 ' Microsoft Jas Black ';    }  </style>  

Font size

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


  <style>    H1 {      width:64px;      height:64px;      Background:url (Https://static.xiaohuochai.site/icon/icon_64.ico);      font-size:0;    }  </style>