css uses background image to replace text to achieve the purpose of hiding text

According to the different html codes, methods are divided into two categories, as follows

html code:

hello see

The first method: text-indent

.replace-indent{

height:200px;

width:200px;

Background:url();

text-indent:-9999px;

}

Second method:

.replace-indent{

height:200px;

width:200px;

Background:url();

text-indent:100%;

white-space:nowrap;

overflow:hidden;

}

Third method:

.replace-indent{

height:0px;

width:200px;

Background:url();

padding:200px 0 0 0;

overflow:hidden;

}

The fourth method: before

.replace-indent{

width:image's width;

height:image's height;

overflow:hidden;

}

.replace-indent : before{

content:url();

}

html code:

hello see

First method:

.replace-indent{

height:200px;

width:200px;

Background:url();

}

span{

display:none;

}

Second method:

.replace-indent{

height:200px;

width:200px;

Background:url();

}

span{

width:0;

height:0;

　display:block;

overflow:hidden;

}

Third method:

.replace-indent{

height:200px;

width:200px;

Background:url();

}

span{

　clip-path:polygon(0px 0px,0px ​​0px,0px ​​0px,0px ​​0px,0px ​​0px);

-webkit-clip-path:polygon(0px 0px,0px ​​0px,0px ​​0px,0px ​​0px,0px ​​0px);

}