首页 / CSS / 以图换字的几个方法及思路_经验交流
以图换字的几个方法及思路_经验交流
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了以图换字的几个方法及思路_经验交流，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2941字，纯文字阅读大概需要5分钟。
内容图文
今天有个朋友做网页的时候遇到个问题：想保留链接的背景，但又要链接里的文字消失！可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题，这里我把常用的几个方法写出来，把思路也讲一下，希望能帮助刚开始学习的朋友。 “以图换字”就是用图片替换文字表现。我们都知道，文字在浏览器里的表现形式是很差的，会有锯齿，没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的，但是在WEB标准中对于LOGO、标题，常常需要用到这些。用表格来做的话我们只是在某个地方帖上一张图，这样的方式比较简单，但是不利于搜索。所以我们需要采用标准方式来做，保证网页处于一种良好的状态而有利于搜索。通常以图
显示消失：(display:none;) 这不只是让容器内的内容消失而是包括容器本身都消失。所以我们必需在容器内再做一个容器来保证内消失部分之后，容器内的背景可以正常显示。例：
代码如下:
标题内容
#logo {display:none; background:URL; width:300px; height:100px;} 如果是这样写那么你根本什么也看不到。那正确的方式是什么写呢？看示例：
代码如下:
标题内容
#logo {background:URL; width:300px; height:100px;}#logo span {display:none;} 代码如下:
标题内容
#logo {background:URL; width:300px; height:100px;}#logo a {display:none;}大家猜一下这个代码能显示出东西吗？事实是背景显示了，可是链接没了。我们上面说过：被赋于了display:none;属性的容器自身也会消失。那我们就清楚了，必需要在这个A标签里加个容器。我们再看示例：
代码如下:
标题内容
#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;} 代码如下:
标题内容
#logo a {background:URL; width:300px; height:100px; display:block;}#logo a span {display:none;}注意这里的A标签的属性一定要加上display:block;把他强制为块级元素。这样A标签就成了一个宽为300高为100，有一个背景没有文字内容的链接形式。大家看到了上面在A标签里还加了一个span标签，好像有点多余。能不能不用span也可以实现效果呢。可以，不过思路就不一样了，而是下面的这种位置移动法。
位置移动：也就是让内容啊分进行位置移动，移出显示区之外。我们还是看代码来了解这个方法。
代码如下:
标题内容
#logo, #logo a {width:300px; height:100px; overflow:hidden;}#logo a {background:URL; padding:100px 0 0; display:block;} 以上内容只是我比较常用的两种方法，当然还会有一些别的方式方法，这些方法都有各自的有缺点，不过各种方法之间也都有互补的。在应用时可以依据情况选择使用即可。
内容总结
以上是互联网集市为您收集整理的以图换字的几个方法及思路_经验交流全部内容，希望文章能够帮你解决以图换字的几个方法及思路_经验交流所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】