css的几种以图换字方法小结

日期:2021-03-12 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

方式1:应用text-indent的负值,将內容移出器皿
比如:

拷贝编码
编码以下:

<h1 class="logo"><a href="#">logo</a></h1>
.logo>a{display:block;text-indent:⑼99px;}

此方式(十分不强烈推荐)看起来蛮简易,但实际上有几个没理想的地区,1是较为吃資源;2是在ie5下面会出現滞后情况没法显示信息;3是內容为超连接时,长长的黑色虚框,让你抓狂。
方式2:应用display:none,将內容掩藏
比如:

拷贝编码
编码以下:

<h1 class="logo"><a href="#"><span>logo</span></a></h1>
.logo>a>span{display:none;}

此方式(不强烈推荐)实际上倒也不繁杂,只是必须多加上1个标识,较为消耗;且display:none出現的概率太多,对seo也是会一些许危害的。
方式3:应用padding将文本挤出器皿以外,并将超过的一部分hidden
比如:

拷贝编码
编码以下:

<h1 class="logo"><a href="#"><span>logo</span></a></h1>
.logo>a{display:block;width:200px;height:35px; overflow:hidden;}
.logo>a>span{padding-left:200px;}

方式4:应用font设定超小字体样式,做到掩藏內容的目地
比如:

拷贝编码
编码以下:

<h1 class="logo"><a href="#">logo</a></h1>
.logo>a{font-size:0;}
/*一部分访问器设定为0不起功效,最好是设定成下面的*/

拷贝编码
编码以下:

.logo>a{font-size:0.01px;}

此方式(强烈推荐)只必须将字体样式和行高设定为0,随后overflow:hidden就行;但是这样在Safari和Chrome下還是会有1px高的字出現,因此应当再设定1下字体样式的色调和情况图同样或相仿。以此就一样能够做到掩藏內容的目地,临时还没发现有甚么不良反应。
方式5:设定较大行高line-height,将內容移出器皿
比如:

拷贝编码
编码以下:

<h1 class="logo"><a href="#">logo</a></h1>
.logo>a{display:block;width:100px; height:25px; line-height:300px;}

此方式(强烈推荐)适配性比如法好些,适用1些独特标识的文本掩藏如button等。
方式6:设定文本色调为transparent或rgba(0,0,0,0)
比如:

拷贝编码
编码以下:

<h1 class="logo"><a href="#">logo</a></h1>
.logo>a{color:transparent;}
/*或*/
.logo>a{color:rgba(0,0,0,0);}

此方式(强烈推荐)但不适用ie8下列的访问器,体验最好是,而且客户还能够挑选到文字。