设计观点View
作者头像

可用性更好的CSS隐藏文字技术(CSS图片替换文字)

【一丝冰凉】 /2012-06-28/已有人看过/层叠之美

 对于CSS隐藏文字也许大家并不陌生,第一想到的或许就是 text-indent:-999em。但是作为一个重构者,精益求精一直是我们追求的目标,抛开text-indent的适用场景和bug不谈,大家有没有想过这种方法的弊端呢?uSW上海云路网络科技有限公司

显而易见,如果图片由于某些原因未加载的时候,设置了 text-indent:-999em导致文字移出了浏览器视口(可视区域),我们看到的会是一片空白。网页中最重要的是内容,显然此时的可用性大打折扣了。uSW上海云路网络科技有限公司

那么下面就先给大家说说可用性uSW上海云路网络科技有限公司

Web内容无障碍指南(WCAG 2.0)定义了web内容无障碍的四项基本原则:可感知、可操作、可理解和健壮性,借用下jace幻灯片的图:uSW上海云路网络科技有限公司

未命名.jpguSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

根据以上原则,我们就可以更好的来阐述 隐藏文字的利弊了,分为以下四种情况:uSW上海云路网络科技有限公司
uSW上海云路网络科技有限公司

文字隐藏 uSW上海云路网络科技有限公司

分类 uSW上海云路网络科技有限公司

作用 uSW上海云路网络科技有限公司

方法 uSW上海云路网络科技有限公司

1.完全隐藏 uSW上海云路网络科技有限公司

用户交互 uSW上海云路网络科技有限公司

display:none; uSW上海云路网络科技有限公司

2.对屏幕阅读器隐藏 uSW上海云路网络科技有限公司

减少干扰 uSW上海云路网络科技有限公司

tabindex=-1uSW上海云路网络科技有限公司

3.对机器不隐藏 uSW上海云路网络科技有限公司

屏幕阅读器,搜索引擎等机器可以识别 uSW上海云路网络科技有限公司

text-indent:-999em; uSW上海云路网络科技有限公司

line-height 较大值uSW上海云路网络科技有限公司

... uSW上海云路网络科技有限公司

4.图片未加载不隐藏 uSW上海云路网络科技有限公司

图片未加载时文字可以显示 uSW上海云路网络科技有限公司

这个是本文的重点uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

很多时候,由于视觉的要求,很多标题性的文字,我们也还是得去使用图片,比如这次改版的一淘首页:uSW上海云路网络科技有限公司

T1_NrmXnBkXXcAHZ70-234-320.pnguSW上海云路网络科技有限公司

所以可用性更好的CSS隐藏文字应该具备一下几点:uSW上海云路网络科技有限公司

1)支持双向(bidi-directional )字符集语言;uSW上海云路网络科技有限公司

     即同时支持从左到右和从右到左(例如:阿拉伯语、希伯来语)方向的文字。uSW上海云路网络科技有限公司

2)可感知:图片未加载的时候,文字可以正常显示,而不是空白;uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

未命名.jpguSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

     在高对比度模式下,所有背景图片都会被隐藏掉,我们来看看一淘的一个频道页:http://price.etao.com/search.htm?cat=50080000&sort=cmuSW上海云路网络科技有限公司

111.jpguSW上海云路网络科技有限公司

高对比度模式下会变成这样:uSW上海云路网络科技有限公司

222.jpguSW上海云路网络科技有限公司

去比较 按钮完全不见了,只能盲人摸象。很多朋友可能不知道高对比度模式是作何用途的,他是微软为色弱群体提供的一种系统主题,使色弱用户能更好的识别页面内容。再次提醒大家页面内容才是主体,不要本末倒置了。对于这种按钮,更好的方法是不把文字写入背景,可用性和可维护性都会更好!(色弱属于色觉障碍,分色盲和色弱两类,色弱为辨色力不足。色盲包括红色盲、绿色盲及蓝色盲、全色盲。后两种少见,色弱也包括红、绿、蓝色弱)uSW上海云路网络科技有限公司

3)可感知:屏幕阅读器,搜索引擎都可以正常识别文字;uSW上海云路网络科技有限公司

这对于视觉障碍用户和SEO都是很有帮助的;uSW上海云路网络科技有限公司

4)健壮:用最少的Html结构去实现,减少对空标签的依赖性,容易抽象为独立模块。uSW上海云路网络科技有限公司

需要隐藏文字的图片通常作用是装饰性的,像网站的logo更适合使用img标签插入。uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

好了,下面我们来看看实现CSS隐藏文字的各种方法,同时给出对应的优缺点uSW上海云路网络科技有限公司

先上 DEMOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

1、暴力的 display:noneuSW上海云路网络科技有限公司

         <div class="hd">uSW上海云路网络科技有限公司

              <h2 class="tit fl"><span class="ir">CSS层叠之美</span></h2>uSW上海云路网络科技有限公司

              <a href="http://www.iyunlu.com/view" class="more" title="CSS层叠之美">更多 &gt;</a>uSW上海云路网络科技有限公司

</div>uSW上海云路网络科技有限公司

.mod1 .ir { display: none; }uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评:大量使用容易被搜索引擎认为作弊,而且文字是彻底隐藏。 uSW上海云路网络科技有限公司

2、万能的margin负值uSW上海云路网络科技有限公司

<div class="hd">uSW上海云路网络科技有限公司

              <a class="tit ir" href="http://www.iyunlu.com/view" title="注意bug">云路科技云路科技云路科技云路科技</a>uSW上海云路网络科技有限公司

</div>uSW上海云路网络科技有限公司

.mod2 .ir {uSW上海云路网络科技有限公司

       margin-left: -999em;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评:容易对布局造成影响,不适合模块化uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

扩展阅读:uSW上海云路网络科技有限公司

margin负值 – 一个秘密武器

3text-indent 负值uSW上海云路网络科技有限公司

<div class="hd">uSW上海云路网络科技有限公司

              <a class="tit ir" href="http://www.iyunlu.com/view" title="注意bug">CSS层叠之美</a>uSW上海云路网络科技有限公司

</div>uSW上海云路网络科技有限公司

.mod3 .ir{uSW上海云路网络科技有限公司

       text-indent:-999em;uSW上海云路网络科技有限公司

       overflow:hidden;uSW上海云路网络科技有限公司

       display:block;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE问题多多uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评:firefox下会导致焦点框扩大,需要添加overflow:hidden,同时text-indent尽量用于block元素,否则问题多多。uSW上海云路网络科技有限公司

详见:《text-indent小总结》http://ued.ctrip.com/blog/?p=2942 uSW上海云路网络科技有限公司

IE6/IE7下,使用负缩进的方法隐藏inline-block元素内的文本,该元素也会缩进相同的值。uSW上海云路网络科技有限公司

text-indent方法不适用于从右到左方向的语言。uSW上海云路网络科技有限公司

4、新颖的 font:0/0 a;uSW上海云路网络科技有限公司

<div class="hd">uSW上海云路网络科技有限公司

    <h2 class="tit fl"><span class="ir">CSS层叠之美</span></h2>uSW上海云路网络科技有限公司

    <a href="http://www.iyunlu.com/view" class="more" title="CSS层叠之美">更多 &gt;</a>uSW上海云路网络科技有限公司

</div>uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

.mod4 .ir {uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

border: 0 none;uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

font: 0/0 a;uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

/* display:block;uSW上海云路网络科技有限公司

margin-top:-1px;  修复 IE6 隐藏不完全 */uSW上海云路网络科技有限公司

text-shadow: none;uSW上海云路网络科技有限公司

color: transparent;uSW上海云路网络科技有限公司

background-color: transparent;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

.mod4 .ir br { display: none; }uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE6出现小点uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评这个方法是html5-boilerplate 中使用的,效果不错,唯独IE6会显示一个小点,可以通过其他方法兼容IE6ie6.jpguSW上海云路网络科技有限公司

5、牛掰的 CSS clip 属性裁剪uSW上海云路网络科技有限公司

 <div class="hd">uSW上海云路网络科技有限公司

          <h2 class="tit fl"><a class="ir-warp" href="http://www.iyunlu.com" title="CSS层叠之美"><span class="visually-hidden">CSS层叠之美</span></a></h2>uSW上海云路网络科技有限公司

</div>uSW上海云路网络科技有限公司

.visually-hidden {uSW上海云路网络科技有限公司

       position: absolute !important;uSW上海云路网络科技有限公司

       clip: rect(1px 1px 1px 1px); /* IE6, IE7 */uSW上海云路网络科技有限公司

       clip: rect(1px, 1px, 1px, 1px);uSW上海云路网络科技有限公司

       padding: 0 !important;uSW上海云路网络科技有限公司

       border: 0 none!important;uSW上海云路网络科技有限公司

       height: 1px !important;uSW上海云路网络科技有限公司

       width: 1px !important;uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评用好clip,事倍功半,只是hack比较多,CSS代码比较多。由Jonathan Snook 最先提出的,详见 Hiding Content for AccessibilityuSW上海云路网络科技有限公司

6、空标绝对定位遮盖法uSW上海云路网络科技有限公司

                <h2 class="tit ir-warp fl"><b class="ir"></b><a href="http://www.iyunlu.com" title="CSS层叠之美">CSS层叠之美</a></h2>uSW上海云路网络科技有限公司

.mod6 .ir-warp {uSW上海云路网络科技有限公司

       position: relative;uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

       white-space: nowrap;uSW上海云路网络科技有限公司

       word-wrap: normal;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

.mod6 .ir {uSW上海云路网络科技有限公司

       width: 100%;uSW上海云路网络科技有限公司

       height: 100%;uSW上海云路网络科技有限公司

       position: absolute;uSW上海云路网络科技有限公司

       left: 0;uSW上海云路网络科技有限公司

       top: 0;uSW上海云路网络科技有限公司

       background: url(http://www.iyunlu.com/skin/tg/images/logo.png) no-repeat 0 0;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评添加了无语义的空标签,图片未加载和高对比度模式下可以显示文字,由于不可以设置背景颜色 ,透明图片无法完整遮挡住文字,除非使文字面积不超过图片不透明部分。uSW上海云路网络科技有限公司

7、可操作欠佳的 position: absoluteuSW上海云路网络科技有限公司

<h2 class="tit ir-warp fl"><span class="ir">CSS层叠之美</span></h2>uSW上海云路网络科技有限公司

.mod7 .ir-warp { position: relative; }uSW上海云路网络科技有限公司

.mod7 .ir {uSW上海云路网络科技有限公司

       position: absolute;uSW上海云路网络科技有限公司

       top: -999em;uSW上海云路网络科技有限公司

       left: -999em;uSW上海云路网络科技有限公司

       overflow:hidden;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

页面跳动uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评可聚焦元素获得焦点时,页面会出现极品的滚动现象。uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司
uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

hide-offscreen-left.jpguSW上海云路网络科技有限公司

8、又见 overflow:hiddenuSW上海云路网络科技有限公司

<h2 class="tit"><span class="ir">CSS层叠之美</span></h2>uSW上海云路网络科技有限公司

.mod8 .ir {uSW上海云路网络科技有限公司

       display: block;uSW上海云路网络科技有限公司

       line-height: 0;uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评Apple voice Over 无法读出高度为0元素中的文字uSW上海云路网络科技有限公司

9、高度三倍以上的line-heightuSW上海云路网络科技有限公司

<h2 class="tit"><span class="ir">云路科技-CSS层叠之美</span></h2>uSW上海云路网络科技有限公司

.mod9 .ir {uSW上海云路网络科技有限公司

       display: block;uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

       height: 60px;uSW上海云路网络科技有限公司

       line-height: 180px;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评uSW上海云路网络科技有限公司

10、另辟蹊径 content url 插入图片(绝对定位方式)uSW上海云路网络科技有限公司

         <div class="hd ir-warp">uSW上海云路网络科技有限公司

              <h2 class="tit ir">CSS层叠之美</h2>uSW上海云路网络科技有限公司

       </div>uSW上海云路网络科技有限公司

.mod10 .ir-warp {uSW上海云路网络科技有限公司

         position: relative;uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

.mod10 .ir:before {uSW上海云路网络科技有限公司

       position: absolute;uSW上海云路网络科技有限公司

       left: 0;uSW上海云路网络科技有限公司

       top: 0;uSW上海云路网络科技有限公司

       width: 100%;uSW上海云路网络科技有限公司

       height: 100%;uSW上海云路网络科技有限公司

       content: url("http://www.iyunlu.com/skin/tg/images/logo.png");uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE67不支持uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评原理与方法6类似,使用更加符合语义的content插入装饰性图片,可维护性更好,很可惜IE67不支持:before伪元素。uSW上海云路网络科技有限公司

11content   background  插入图片uSW上海云路网络科技有限公司

         <div class="hd ir-warp">uSW上海云路网络科技有限公司

              <h2 class="tit ir">CSS层叠之美</h2>uSW上海云路网络科技有限公司

       </div>uSW上海云路网络科技有限公司

.mod11 .ir-warp { overflow: hidden; }uSW上海云路网络科技有限公司

.mod11 .ir:before {uSW上海云路网络科技有限公司

       content: "\200b";uSW上海云路网络科技有限公司

         background: url(http://www.iyunlu.com/skin/tg/images/logo.png) no-repeat 0 0;uSW上海云路网络科技有限公司

       display: block;uSW上海云路网络科技有限公司

       height: 100%;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

定高uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE67不支持uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评由于高度固定了,当图片未显示的时候依然占据空间,文字溢出被隐藏了所以还是无法显示出来。uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

12、精益求精content url+display:inline-blockuSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

         <div class="hd ir-warp">uSW上海云路网络科技有限公司

              <h2 class="tit ir">CSS层叠之美</h2>uSW上海云路网络科技有限公司

       </div>uSW上海云路网络科技有限公司

.mod12 .ir-warp { overflow: hidden; }uSW上海云路网络科技有限公司

.mod12 .ir:before {uSW上海云路网络科技有限公司

       content: url("http://www.iyunlu.com/skin/tg/images/logo.png");uSW上海云路网络科技有限公司

       display: inline-block;/*    配合 margin spire 定位 */uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE67不支持uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评强强联合,此方法可谓精益求精,图片未加载也能正确显示文字,同时还支持透明图片和设置背景颜色uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

13、使用相对定位遮盖uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

<h2 class="tit fl"> <a class="ir-warp" href="http://www.iyunlu.com" title="CSS层叠之美"> <span class="ir">CSS层叠之美</span> </a> </h2>uSW上海云路网络科技有限公司

.mod13 .ir-warp {uSW上海云路网络科技有限公司

       display: block;uSW上海云路网络科技有限公司

       height: 100%;uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

       white-space: nowrap;uSW上海云路网络科技有限公司

       word-wrap: normal;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

.mod13 .ir {uSW上海云路网络科技有限公司

       position: relative;uSW上海云路网络科技有限公司

       z-index: -1;uSW上海云路网络科技有限公司

       zoom: 1;uSW上海云路网络科技有限公司

       overflow: hidden;uSW上海云路网络科技有限公司

}uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE67层级buguSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

点评比方法6更简单,没有无语义的空标签。如果外层标签存在绝对定位,注意IE67可能会出现层级bug,导致文字无法遮盖,Oh my god,西天如来、观世音菩萨、玉皇大帝赶紧收了IE6这个妖孽吧!uSW上海云路网络科技有限公司

综上所述uSW上海云路网络科技有限公司

方法12,13是我们的不二之选,两者互相补充,根据使用场景不同,大家可以选择最适合的方案,当然IE67这两朵奇葩需要我们特别对待。我们来看看两者合体后的情况:uSW上海云路网络科技有限公司

正常情况uSW上海云路网络科技有限公司

a90de54da9998e63b55a405790ac1fa4.jpguSW上海云路网络科技有限公司

图片未加载uSW上海云路网络科技有限公司

合体后-图片未加载.pnguSW上海云路网络科技有限公司

所有浏览器完美显示出文字,Safari,Opera,Chrome对于conten插入的图片加载失败时 均显示提示图标或者 “图像”文字,这个浏览器处理不同就不过多说明了。看看合体后的支持情况:uSW上海云路网络科技有限公司

屏幕阅读器uSW上海云路网络科技有限公司

图片未加载显示文字uSW上海云路网络科技有限公司

高对比度模式显示文字uSW上海云路网络科技有限公司

透明图片uSW上海云路网络科技有限公司

设置背景色uSW上海云路网络科技有限公司

是否需要定义宽高uSW上海云路网络科技有限公司

是否支持SpriteuSW上海云路网络科技有限公司

兼容性uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

IE6,7显示uSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

YESuSW上海云路网络科技有限公司

NOuSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

再看看 DEMOuSW上海云路网络科技有限公司

展望未来uSW上海云路网络科技有限公司

content 生成内容特别适合做一些装饰性的布局,因为content就是为此而生的,很多小图标的定位我们完全可以抛弃空标签了,还有强大的 CSS3 contentattr() 我们拭目以待。uSW上海云路网络科技有限公司

content在闭合浮动(清除浮动)上也大显身手,有兴趣可以看看我的另外一篇文章:uSW上海云路网络科技有限公司

那些年我们一起清除过的浮动

关于content 的更多应用请看:CSS content内容生成技术以及应用uSW上海云路网络科技有限公司

uSW上海云路网络科技有限公司

通过各种方法的优缺点互补,我们很容易获得最适合的方案,在做好兼容性布局后,应该往可用性等更深层次进取,不断尝试探索新的方法。最后送大家一句话:uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

做简单可依赖的人,写简单可依赖的CSSuSW上海云路网络科技有限公司

CSS层叠之美,你发现了吗?uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司

由于精力有限,本文难免存在错误与疏漏,还请不吝口水,欢迎补充和修正本文存在的不足,非常感谢!uSW上海云路网络科技有限公司

参考文献:uSW上海云路网络科技有限公司

Nine Techniques for CSS Image Replacement  http://css-tricks.com/css-image-replacement/uSW上海云路网络科技有限公司

Nouvelle méthode de remplacement de texte  par une image http://css.4design.tl/nouvelle-methode-de-remplacement-de-texte-par-une-imageuSW上海云路网络科技有限公司

Another CSS image replacement technique   http://nicolasgallagher.com/another-css-image-replacement-technique/uSW上海云路网络科技有限公司

视觉隐藏内容  http://www.topcss.org/?p=418uSW上海云路网络科技有限公司

 uSW上海云路网络科技有限公司