欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-11 21:47:36
...
根据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);

}