关于用隐藏文字（图片替换文字）的更好的可用性方法

有些文字或者效果很难用文字表示出来时我一般都是用图片或者css3来实现，关于css隐藏文字的方法很多，以前一般都用text-indent隐藏文字实现图片替换文字的方法，因为这种方法不影响机器或者搜索引擎搜索到文字，利于优化，但是今天看了一丝冰凉的文章，发现用这种方法也有很多的弊端。

显而易见，如果图片由于某些原因未加载的时候，设置了 text-indent：-999em导致文字移出了浏览器视口（可视区域），我们看到的会是一片空白。网页中最重要的是内容，显然此时的可用性大打折扣了。

从他的技术文章中学习经过总结到了另外一种方法：

<div class="box">
<h1><a href="" title="世界工厂网">世界工厂网</a></h1>
</div>

用相对定位及content方法实现

*background:#fff url(images/logo.png) no-repeat 0 0; //解决ie6，ie7中不兼容的问题,主要是logo图片不显示，加上背景颜色主要是解决ie6和ie7中不能遮住文字问题

}
.box a{ position:relative; z-index:-1; zoom:1;}
.box a:before { content:url(images/logo.png); display:inline-block;}
</style>

用overflow:hidden方法实现

.box h1{ height:50px; width:205px; overflow:hidden;background: url(http://cn-style.gcimg.net/v6/css/common/images/logo.png) no-repeat 0 0;}
.box a{ height:0; line-height:0; overflow:hidden; display:block; }

用line-height方法实现

.box h1{ height:50px; width:205px; overflow:hidden;background: url(http://cn-style.gcimg.net/v6/css/common/images/logo.png) no-repeat 0 0; }
.box a{ display: block;overflow: hidden;height: 50px;line-height: 180px; }

总的来说我觉得第一种实现方法比较好点，它避免了很多弊端，能学到那么多，要感谢一丝冰凉的分享，由于自己的理解能力有限，只能总结那么多

关于用隐藏文字（图片替换文字）的更好的可用性方法相关推荐

POI Word 模板文字图片替换
POI Word 模板文字图片替换博客分类: java poi POIjavaWOrd 实验环境:POI3.7+Word2007 Word模板: 替换后效果: 代码: 1.入口文件 Java ...
咖啡汪日志——JAVA导出pdf文件加水印文字+图片、文字
咖啡汪日志--JAVA导出pdf文件加水印文字和图片.文字 hello,又大家见面了! 作为一只不是在戏精就是在戏精路上的哈士奇,今天要展示给大家的就是如何快捷地给pdf文件增加各种水印.嗷呜呜,前 ...
计算机基础替换文字步骤,若干CAD文件中的文字批量替换，有最简单可行的方法或软件吗？...
实在的讲WORD与WPS,确实WORD的总体功能强,但有些功能十分不方便! 从网上扒动东,对相当多的人来说"文字"还是重头戏.直接到WORD显然有相当多的格式去不了,无论HTML文 ...
php 滚动彩色文字,滚动文字特效大全 -★用彩色生成器加文字,图片加文字,带背景的链接滚动文字...
霍斯的滚动文字特效大全http://www.sudu8.cn/sudu8_article/87/471.html 带背景的链接滚动文字http://font.itbulo.com/ 代码如下: 对 ...
html鼠标划到背景图显示文字,用css3实现鼠标移入图片后显示其他文字/图片的效果...
导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和 ...
C# Word文档中插入、提取图片，文字替换图片
Download Files: http://www.c-sharpcorner.com/UploadFile/26b237/image-operations-using-word-document- ...
js replace将文字表情替换为图片
原文地址:javascript replace将文字表情替换为图片 (实用.赞)_chelen_jak的博客-CSDN博客微博或者论坛上常见的效果,选择表情插入文本域的时候,显示的是类似[哈哈]这样 ...
python删除图片文字_文字隐藏到图片的python脚本
本帖最后由 WyattHuang 于 2019-7-13 17:47 编辑这是什么: 昨天写的一个能把文字隐藏在图片的python脚本 DEMO: 藏文字之前: 藏文字之后: 使用方法下载 T2I ...
【java spring boot使用easypoi实现word文档占位符替换文字和图片、Excel图片贴到对应单元格】
最近接到一个任务,写两个导出工具:1.word文档导出,将数据和图片放入到word中,将多个word合并为一个导出.2.Excel文档导出,将二维码信息和图片按照模板放入到Excel中,按9个一页排版 ...

关于用隐藏文字（图片替换文字）的更好的可用性方法

关于用隐藏文字（图片替换文字）的更好的可用性方法相关推荐

最新文章

热门文章