日常的布局中，经常会涉及到我们用一张优雅的图片标题去代替普通的问题标题。但是我们在布局中会始终写上标题相关的内容文字，然后将其隐藏起来。
前段时间参加了公司伟大的瑶姐的一次关于布局中以图换字的分享。今天我将其中实用的两种方法分享给大家。如有不足，请指正，如果你还有其他方法，请告知我。
1，低级方法：这种方法就是直接影藏掉文字，只显示图片。实现如下：
1 <style> 2 #logo a {background:url(test.jpg) no-repeat; width:195px; height:210px; display:block;} 3 #logo a span {display:none;} 4 </style> 5 <div id="logo"> 6 <a href="URL" title="团购最低价，越团越便宜"> 7 <span>团购最低价，越团越便宜</span> 8 </a> 9 </div>
或者：
1 <style> 2 #logo, #logo a {width:195px; height:21px; overflow:hidden;} 3 #logo a {background:url(test.jpg) no-repeat; padding-left: 195px; display:block;} 4 </style> 5 <div id="logo"><a href="URL" title="团购最低价，越团越便宜">团购最低价，越团越便宜</a></div>
效果如下：
2，高级实现：图片资源能正常加载时显示图片，图片资源加载不出来就显示汉字，这个是不是很叼了？呵呵！
可以这么来做：
1 <style> 2 .logo{display:block;position:relative;overflow:hidden;width:195px;height:21px;font-size:14px;} 3 .logo img{position:absolute;top:0;left:0;z-index:2;border:none; font-size: 0;} 4 .logo span{position:absolute;top:0;left:20px;z-index:1;} 5 </style> 6 <a href="" class="logo"> 7 <img alt="团购最低价，越团越便宜" src="tesdt.jpg" /> 8 <span>团购最低价，越团越便宜</span> 9 </a>
还可以这么来做：
1 <style> 2 .txtimg{overflow:hidden;width:195px;height:21px;color:red; padding-left:10px;} 3 .txtimg:before{content:url(test.jpg);} 4 </style> 5 <p class="txtimg">团购最低价，越团越便宜</p>
当图片资源没有加载出来就会显示文字：
开心一刻：
