首页 > Web开发 > 详细

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

时间:2016-07-04 18:54:43      阅读:189      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!