css实例text-indent以图换字

作者:divcss教程吧      点击次数:562次     发布日期:2014-10-06

css实例text-indent以图换字

以图换字是CSS布局中非常常用的一种手段,因为图片文字有时候比可选的文字的表达效果更好!
  因此,某些文字标题是用图片来表达的。但写一个img标签实在不雅,为了照顾蜘蛛(PS就是优化),我们使用浏览器障眼法。
  于是用最常用的text-indent,最核心就是使用这个属性把文字从盒子给移走。变态点的做法就是直接取值 -9999px

css:

 

 示例代码
 h4 a{background:url(http://www.divcss8.com/admin/FileImg/NewsImg/20141006103500moren.png) left top no-repeat;
             width:150px;
             height:140px;
            text-indent:-9999px;
            display:block;}


Xhtml:

 

 示例代码 
<h4><a href="#">DIVCSS8</a></h4>


   完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>divcss8</title>
    <style type="text/css">
        h4 a{background:url(http://www.divcss8.com/admin/FileImg/NewsImg/20141006103500moren.png) left top no-repeat;
             width:150px;
             height:140px;
            text-indent:-9999px;
            display:block;}
    </style>
</head>
<body>
<h4><a href="#">DIVCSS8</a></h4>
</body>
</html>

 

是不是看不到文字了。而显示是图片对吧。

分享DIVCSS8