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

原创
2016-07-06 13:28:22 998浏览

根据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);

}

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
上一条:html 隐藏滚动条 下一条:css实现隐藏显示

相关文章

查看更多