网络编程
位置：首页>> 网络编程>> 网页设计>> { hide_text } CSS文字隐藏总结报告（4）

{ hide_text } CSS文字隐藏总结报告（4）

作者：tracy2　来源：蓝色理想　发布时间：2010-06-13 17:19:00　

标签：隐藏,CSS,文字

兼容性：

优点：

  • 兼容性好

  • 超链接和图片替代文本可用

缺点：

  • 使用限制较大，需要定宽高

  • 多一丁点：前置背景遮挡

代码片段：

(x)HTML

<!-- 在css无效和css有效图片无效都适用 -->
<a class="hide_bg" href="#"><span
class="front_bg"></span>我是可访问性的化身</a>

CSS

.hide_bg{ 
width:200px; 
height:20px; 
position:relative; 
display:block;/* 行内元素需要 */
} 
.hide_bg .front_bg{ 
background:url('bg_text.png') no-repeat; /* 背景内容等于或大于容器大小 */
position:absolute; /* 绝对定位，不影响文本 */
left:0px; 
top:0px; 
width:200px;/* 与父元素等宽高 */
height:20px; 
display:block; 
/* cursor:pointer; ie6和链接需要用 */
}

兼容性：

优点：

  • 兼容性好

  • 超链接和图片替代文本可用

  • 可访问性强

缺点：

  • 使用限制较大，需要定宽高

  • 代码冗余，需要空标签

  • 另辟蹊径：content:”"

代码片段：

(x)HTML

<!--只有opera支持，按定义只能用在:before 和:after-->
<a class="hide_ct" href="#">也许我才是最合适的，谁知道呢，内容表现分离。只有opera支持</a>

CSS

.hide_ct{ content:&quot;&quot;; }

兼容性：

优点：

  • 简单

缺点：

  • 内容样式分离

  • 不实用

原文：http://caib.me/hide-text/

第一页 上一页 1 2 3
4
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com