css两种动态显示星星等级的比较（一星、两星、三星、四星、五星）

浏览数：42 / 时间：2015年06月09日

以下是显示后的图片，相信在很多网站上都能看到这种效果，目前我知道两种实现方式

技术分享

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>