技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> CSS图片替换

CSS图片替换

浏览:1926次  出处信息

我们在做网站的时候,有时候需要把网站的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}

点击这里,可以查看例子。

建议继续学习:

  1. VIM查找替换归纳总结    (阅读:4531)
  2. vim替换^M字符    (阅读:3857)
  3. string替换所有指定字符串(C++)    (阅读:3316)
  4. 使用tcpdump搞定一个替换问题    (阅读:2541)
  5. 使用Vim(gvim)实现复杂的查找替换的一个例子    (阅读:2508)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1