你的位置:首页 > 网页设计

[网页设计]css用背景图来替换文字来达到隐藏文字的目的


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

html代码:

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

}