Image Sprites 对“高对比度”模式下背景图片显示优化 （3）
|
- UID
- 1066743
|
Image Sprites 对“高对比度”模式下背景图片显示优化 （3）
Demo 示例先制作一张图片，将五个 LOGO(270*110px) 合并成一张图片 (270*550px)，如下：
图 5. LOGO 合成图 清单 1. HTML 结构1
2
3
4
5
6
7
8
9
| <h1>img Sprites demo</h1>
<ul>
<li class="baidu"><img src="logoset.jpg" alt="">Baidu Logo</li>
<li class="google"><img src="logoset.jpg" alt="">Google Logo</li>
<li class="taobao"><img src="logoset.jpg" alt="">Taobao Logo</li>
<li class="yahoo"><img src="logoset.jpg" alt="">Yahoo Logo</li>
<li class="ebay"><img src="logoset.jpg" alt="">Ebay Logo</li>
</ul>
|
为图片设置”alt”属性，可以使屏幕阅读器忽略它，文字”Baidu Logo”有利于搜索引擎，提升 SEO，在图片被禁止显示时，也有相应的文字描述，提高友好性。
清单 2.CSS 结构1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| li {
overflow: hidden;
position: relative;
height:110px;
width: 270px;
float:left;
margin:5px;
}
li img {
position: absolute;
}
li.baidu img {
top: 0;
}
li.google img {
top: -110px;
}
li.taobao img {
top: -220px;
}
li.yahoo img {
top: -330px;
}
li.ebay img {
top: -440px;
}
|
采用子容器绝对定位，利用 top，left 属性切割图片，将图片部分显示于相应的位置，如有需要，也可以为 img 设置 width，height。 |
|
|
|
|
|
