css用背景图来替换文字来达到隐藏文字的目的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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用背景图来替换文字来达到隐藏文字的目的的主要内容，如果未能解决你的问题，请参考以下文章
请教CSS，在有背景图的背景层上使用模糊滤镜，把内层的文字也模糊了，求不模糊文字的方法？