html背景图与文字分离的好处,css用背景图来替换文字来达到隐藏文字的目的

根据html代码的不同来分成两大类方法，如下

html代码：

hello see

第一种方法：text-indent

.replace-indent{

height:200px;

width:200px;

background:url();

text-indent:-9999px;

}

第二种方法：

.replace-indent{

height:200px;

width:200px;

background:url();

text-indent:100%;

white-space:nowrap;

overflow:hidden;

}

第三种方法：

.replace-indent{

height:0px;

width:200px;

background:url();

padding:200px 0 0 0;

overflow:hidden;

}

第四种方法:before

.replace-indent{

width:image's width;

height:image's height;

overflow:hidden;

}

.replace-indent : before{

content:url();

}

html代码：

hello see

第一种方法：

.replace-indent{

height:200px;

width:200px;

background:url();

}

span{

display:none;

}

第二种方法：

.replace-indent{

height:200px;

width:200px;

background:url();

}

span{

width:0;

height:0;

display:block;

overflow:hidden;

}

第三种方法:

.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);

}