背景图片地址为http://www.ccvita.com/wp-content/uploads/demo/css/sprite.png
<style>
.min, .max {
width:16px;
height:16px;
background-image:url(http://www.ccvita.com/wp-content/uploads/demo/css/sprite.png);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}
.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}
</style>
<div class="max">最大化</div>
<div class="min">最小化</div>
背景图片地址为http://www.ccvita.com/wp-content/uploads/demo/css/editor.gif
<style>
.one, .two {
width:16px;
height:16px;
background-image:url(http://www.ccvita.com/wp-content/uploads/demo/css/editor.gif);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}
.one {
background-position: -108px 0;
}
.two {
background-position: -128px 0;
}
</style>
<div class="one">颜色</div>
<div class="two">链接</div>
背景图片地址为http://www.ccvita.com/wp-content/uploads/demo/css/rating_stars.gif
<style type="text/css">
.star_rating { list-style:none; margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(http://www.ccvita.com/wp-content/uploads/demo/css/rating_stars.gif) 0 0 repeat-x; overflow:hidden;}
.star_rating li { padding:0; margin:0; float:left;}
.star_rating li a { display:block; width:14px; height:12px; text-decoration:none; text-indent:-9000px; z-index:20; position:absolute; padding:0; margin:0;}
.star_rating li a:hover{ background:url(http://www.ccvita.com/wp-content/uploads/demo/css/rating_stars.gif) 0 12px; z-index:2; left:0;}
.star_rating a.one_star{ left:0;}
.star_rating a.one_star:hover{ width:14px;}
.star_rating a.two_stars{ left:14px;}
.star_rating a.two_stars:hover{ width:28px;}
.star_rating a.three_stars{ left:28px;}
.star_rating a.three_stars:hover{ width:42px;}
.star_rating a.four_stars{ left:42px;}
.star_rating a.four_stars:hover{ width:56px;}
.star_rating a.five_stars{ left:56px;}
.star_rating a.five_stars:hover{ width:70px;}
.star_rating li.current_rating{ background:url(http://www.ccvita.com/wp-content/uploads/demo/css/rating_stars.gif) 0 24px; position:absolute; height:12px; display:block; text-indent:-9000px; z-index:1; left:0;}
</style>
<p>满分5.0, width:70px
<ul class="star_rating left">
<li class="current_rating" style="width:70px;">Current rating: 4.7 (3 votes)</li>
<li><a href="###" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li>
<li><a href="###" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li>
<li><a href="###" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li>
<li><a href="###" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li>
<li><a href="###" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li>
</ul>
</p>
<p>当前2.5, width:35px
<ul class="star_rating left">
<li class="current_rating" style="width:35px;">Current rating: 4.7 (3 votes)</li>
<li><a href="###" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li>
<li><a href="###" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li>
<li><a href="###" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li>
<li><a href="###" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li>
<li><a href="###" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li>
</ul>
</p>
满分5.0, width:70px
当前2.5, width:35px