CSS图片替换
浏览:1907次 出处信息
我们在做网站的时候,有时候需要把网站的Logo用图片代替,这样的方法有很多,但是那一种是最好的呢?
使用图片
最简单的最容易想到的办法自然就是使用图片了。然后给图片添加一个alt值,对搜索引擎友好一些。
1 |
<h1><img src="image.gif" alt="Image Replacement"></h1> |
这样做的缺点就是对搜索引擎不友好,搜索引擎对于图片alt属性的权重肯定是低于H1的,就算你的图片是放在H1标签里面。
移开文字
这也是比较常见的一种办法,就是使用display:none来隐藏文字,让用户不可见。
给文字加一个span标签,就可以分别控制了。
1 |
<h1><span>Image Replacement</span></h1> |
CSS部分:
1 2 3 4 5 6 7 8 9 10 |
h1 { background-image: url(image.gif); background-repeat: no-repeat; width: 256px; height: 41px; } h1 span { position: absolute; left: -999em; } |
这样做的好处在于使用CSS让文字对于用户不可见,但是搜索引擎还是能看到的。
之前很多都是使用这样的方法,但是这样做有个不好的地方在于,如果用户在浏览的时候关闭了图片显示,那么Logo部分就是空的了,这样体验很不好。
解决办法
最终的解决办法比较复杂一些,但是最终兼顾了所有方面,包括用户体验和搜索引擎。
HTML的结构跟之前的有些不同,我们需要一个空的span标签。
1 |
<h1><span></span>Image Replacement</h1> |
然后跟之前一样,设置宽高、背景图片、font-size:
1 2 3 4 5 6 |
h1, h1 span { width: 256px; height: 41px; background-image: url(image.gif); font-size: 100%; } |
然后我们通过一些技巧来隐藏文在在图片之下,这样用户关闭图片的时候也能看到文字。
1 2 3 4 5 6 |
h1 span { display: block; position: relative; z-index: 1; margin-bottom: -41px; } |
通过定义z-index就把图片显示在文字之上了。我们还需要更改display:block这样宽高才能应用在span之上,还需要添加margin-bottom让文字不会显示在图片下面。
最后设置overfolw,这样就算文字再大,也不会撑开:
1 |
h1{overflow:hidden} |
点击这里,可以查看例子。
建议继续学习:
- VIM查找替换归纳总结 (阅读:4465)
- vim替换^M字符 (阅读:3793)
- string替换所有指定字符串(C++) (阅读:3297)
- 使用tcpdump搞定一个替换问题 (阅读:2526)
- 使用Vim(gvim)实现复杂的查找替换的一个例子 (阅读:2489)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS圆角制作
后一篇:实现做出html的上标以及下标 >>
文章信息
- 作者:RockUX 来源: RockUX | WEB、前端、JavaScript、PHP
- 标签: 替换
- 发布时间:2011-06-02 13:39:50
近3天十大热文
- [67] Oracle MTS模式下 进程地址与会话信
- [65] 如何拿下简短的域名
- [65] Go Reflect 性能
- [59] 图书馆的世界纪录
- [59] android 开发入门
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [46] 界面设计速成