CSS to replace the word with a variety of methods

This time to bring you CSS with a map to change the word of a variety of methods, CSS with a picture of the note to change the words, the following is the actual case, together to see.

Previous words

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 detail the 9 ways in which CSS is replaced by a graph

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>  
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How CSS quirks box models and standard box models are used

CSS3