布局中以图换字的低级实现和高级实现

日常的布局中，经常会涉及到我们用一张优雅的图片标题去代替普通的问题标题。但是我们在布局中会始终写上标题相关的内容文字，然后将其隐藏起来。

前段时间参加了公司伟大的瑶姐的一次关于布局中以图换字的分享。今天我将其中实用的两种方法分享给大家。如有不足，请指正，如果你还有其他方法，请告知我。

1，低级方法：这种方法就是直接影藏掉文字，只显示图片。实现如下：

<style>
 #logo a {background:url(test.jpg) no-repeat; width:195px; height:210px; display:block;}
 #logo a span {display:none;}
</style>
<div id="logo">
    <a href="URL" title="团购最低价，越团越便宜">
        <span>团购最低价，越团越便宜</span>
    </a>
</div>

或者：

<style>
#logo, #logo a {width:195px; height:21px; overflow:hidden;}
#logo a {background:url(test.jpg) no-repeat; padding-left: 195px;  display:block;}
</style>
<div id="logo"><a href="URL" title="团购最低价，越团越便宜">团购最低价，越团越便宜</a></div>

效果如下：

更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/web/Skills/

2，高级实现：图片资源能正常加载时显示图片，图片资源加载不出来就显示汉字，这个是不是很叼了？呵呵！

可以这么来做：

<style>
 .logo{display:block;position:relative;overflow:hidden;width:195px;height:21px;font-size:14px;}
 .logo img{position:absolute;top:0;left:0;z-index:2;border:none; font-size: 0;}
 .logo span{position:absolute;top:0;left:20px;z-index:1;}
 </style>
 <a href="" class="logo">
         <img alt="团购最低价，越团越便宜" src="tesdt.jpg" />
         <span>团购最低价，越团越便宜</span>
</a>

还可以这么来做：

<style>
 .txtimg{overflow:hidden;width:195px;height:21px;color:red; padding-left:10px;}
 .txtimg:before{content:url(test.jpg);}
</style>
<p class="txtimg">团购最低价，越团越便宜</p>

当图片资源没有加载出来就会显示文字：

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索布局
， display
， logo
， px
， 团购
图片资源
高级技能覆盖低级技能、高级语言和低级语言、高级趣味与低级趣味、高级陨石换低级陨石、java高级流和低级流，以便于您获取更多的相关知识。