原文:css两种动态显示星星等级的比较（一星、两星、三星、四星、五星）
以下是显示后的图片，相信在很多网站上都能看到这种效果，目前我知道两种实现方式
1、background-position加上一张图片
图片：http://www.brookstone.com/webassets/pwr/engine/images/stars.gif
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <link rel="stylesheet" href="style.css">
6 <script src="script.js"></script>
7 <style>
8 .star{
9 height: 20px;
10 line-height: 20px;
11 width: 112px;
12 background-image: url('http://www.brookstone.com/webassets/pwr/engine/images/stars.gif');
13 background-position:0 -69px;
14 background-repeat:no-repeat;
15 }
16
17 </style>
18 </head>
19
20 <body>
21 <div class="star"></div>
22
23
24 </body>
25
26 </html>
这是最简单的background-position定位，不过如果还是觉得stars.gif比较大，可以用第二种方法，不过在使用第二种方法之前必须将stars.gif用photoshop裁剪下，裁剪成两个图片，没有金色星星（5颗灰色星星）的和5金色星的两张图片，其他各类星星的都舍去掉，当然我比较懒，下面的demo图片没有用工具裁剪，直接用的原stars.gif。
2、CSS clip 属性
浏览器支持
所有主流浏览器都支持 clip 属性。
clip 属性剪裁绝对定位元素。
clip:：rect (top, right, bottom, left)
position:absolute 这个必须有
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.star1{
margin:10px 0 0 0;
height: 20px;
line-height: 20px;
width: 112px;
background-image: url('http://www.brookstone.com/webassets/pwr/engine/images/stars.gif');
background-position:0 0;
}
.star1 .inner{
height: 20px;
line-height: 20px;
width: 112px;
background-image: url('http://www.brookstone.com/webassets/pwr/engine/images/stars.gif');
background-position:0 -230px;
position:absolute;
clip:rect(0px,61px,21px,0px);
}
</style>
</head>
<body>
<div class="star1">
<div class='inner'></div>
</div>
</body>
</html>
这个用rect裁剪的好处是即使你想要1.2颗星星也是可以的，只需要改下clicp的rect第二个参数就行了，61px改为27.6px,clip:rect(0px,27.6px,21px,0px);
计算方式 一个星星23px,1.2颗星星：23+23/10*2=27.6，显示效果：
对比第一种，stars.gif这个图片得不断添加各类值得星星，好处显而易见，第二种灵活图片小，减少传输开销。
备注： .star1样式里面的图片应该是5颗灰色星星，.star1 .inner里的图片应该是5颗金色星星
时间： 2024-09-15 08:42:20