css用背景图来替换文字来达到隐藏文字的目的

标签：

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

html代码：

<h1 class="replace-indent">hello see</h1>

第一种方法：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代码：

<h1 class="replace-indent"><span>hello see</span></h1>

第一种方法：

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

}

css用背景图来替换文字来达到隐藏文字的目的

标签：

原文地址：http://www.cnblogs.com/lwwen/p/5641330.html