Home > Article > Web Front-end > css uses background image to replace text to achieve the purpose of hiding text
css uses background image to replace text to achieve the purpose of hiding text
- WBOYOriginal
- 2016-07-06 13:28:221399browse
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);
}