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

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

1、background-position加上一张图片

图片：http://www.brookstone.com/webassets/pwr/engine/images/stars.gif

 <!DOCTYPE html>

 <html>

   <head>

     <link rel="stylesheet" href="style.css">

     <script src="script.js"></script>

     <style>

            .star{

              height: 20px;

              line-height: 20px;

              width: 112px;

              background-image: url('http://www.brookstone.com/webassets/pwr/engine/images/stars.gif');

              background-position:0 -69px;

              background-repeat:no-repeat;

            }

     </style>

   </head>

   <body>

     <div class="star"></div>

   </body>

 </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颗金色星星

css两种动态显示星星等级的比较（一星、两星、三星、四星、五星）的更多相关文章

  1. Swift基础之两种选择星星的评价样式并获取星星的索引值

    想练练手,所以封装了一个两种选择星星的评价样式的Demo,并且可以获取到点击的星星的索引值,方便记录值,上传数据时使用 首先创建View类,设计初始化方法,并且用到了枚举类型和代理方法 方式一:默认的 ...

  2. SNMP安全配置的两种方法(也可同一时候兼顾配置两种方法)

    方法一(最简单安装): 安装 Net-SNMP CentOS及其他RedHat系列产品提供了net-snmp的二进制包.我们能够直接从源里安装. shell> yum install net-s ...

  3. Android中手机录屏并转换GIF的两种方式

    之前在博文中为了更好的给大家演示APP的实现效果,本人了解学习了几种给手机录屏的方法,今天就给大家介绍两种我个人用的比较舒服的两种方法: (1)配置adb环境后,使用cmd命令将手机界面操作演示存为视 ...

  4. Android中BroadcastReceiver的两种注册方式（静态和动态）详解

    今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来 ...

  5. Java中HashMap遍历的两种方式

    Java中HashMap遍历的两种方式 转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...

  6. GET 和 POST 两种方式来完成Http接口

    程序使用 HTTP 协议和服务器交互主要是进行数据的提交,通常数据的提交是通过 GET 和 POST 两种方式来完成,下面对这两种方式(.net c#)进行一下说明: 1. GET 方式. GET 方 ...

  7. web项目docker化的两种方法

    标题所讲的两种方法其实就是创建docker镜像的两种方法 第一种:启动镜像后进入容器中操作,将需要的软件或者项目移动到容器中,安装或者部署,然后退出即可 第二种:编写dockerfile,将需要的镜像 ...

  8. java实现同步的两种方式

    同步是多线程中的重要概念.同步的使用可以保证在多线程运行的环境中,程序不会产生设计之外的错误结果.同步的实现方式有两种,同步方法和同步块,这两种方式都要用到synchronized关键字. 给一个方法 ...

  9. js实现两种实用的排序算法——冒泡、快速排序

      分类:js (4443) (0) 零:数据准备,给定数组arr=[2,5,4,1,7,3,8,6,9,0]; 一:冒牌排序 1思想:冒泡排序思想:每一次对比相邻两个数据的大小,小的排在前面,如果前 ...

随机推荐

  1. Functor仿函数

    转载声明:本文转自网络,稍加整理以备学习和參考之用. 函数对象/仿函数 提到C++ STL.首先被人想到的是它的三大组件:Containers, Iterators, Algorithms,即容器,迭 ...

  2. Windows编程之非模态对话框

    1  创建非模态对话框 <1>  HWNDCreateDialog(  HINSTANCE hInstance,  // handle to module LPCTSTRlpTemplat ...

  3. u-boot 的bootcmd 和bootargs详解，烧写分析

    下面链接这篇文章也非常重要,介绍DM3X的一系列烧写步骤和设置方法 http://www.61ic.com/Article/DaVinci/TMS320DM3x/201204/41827.html U ...

  4. SO_REUSEADDR 套接字选项应用

    在网络上的SO_REUSEADDR套接字选项是用来解决地址问题重用了大量的信息.但仅仅停留在文字的表达.并没有实例,非常easy误导谁刚开始学习,和不解,此处不再赘述. 的使用该选项,以及须要注意的问 ...

  5. windows phone (19) 深入了解TextBlock

    原文:windows phone (19) 深入了解TextBlock TextBlock 一般用于显示文本的元素,我们最为经常用到的是该类的Text属性,其实显示文本有两种呈现方式,一个是设置内部文 ...

  6. 大并发连接的oracle在Linux下内存不足的问题的分析（转）

    最近一台装有Rhel5.3的40G内存的机器上有一个oracle数据库,数据库的SGA设置为20G,当运行业务时,一个业务高峰期时,发现swap频繁交换,CPU 100%,Load很高,基本体现为内存 ...

  7. 全面认识Eclipse中JVM内存设置(转)

    这里向大家描述一下Eclipse中如何进行JVM内存设置,JVM主要管理两种类型的内存:堆和非堆.简单来说堆就是Java代码可及的内存,是留给开发人员使用的:非堆就是JVM留给自己用的,所以方法区.J ...

  8. webservice一片：其中在外线呼叫数据，查看返回数据

    经Android数据被访问,返回的数据(json格公式,object数据类型:strJson) 业务需求:经webservice调用外部暴露数据并返回json数据序列化.阅读到数据库表:[SQ_Eve ...

  9. 优化数据页面（18）——标注keyword

    优化数据页面(18)--标注keyword 设计要点:优化数据页面.界面设计.美化exce 秀秀:事实上俺认为,相同是数据项,它们的重要程度也不同. 阿金:嗯? 秀秀:每一行数据时描写叙述一条信息的, ...

  10. 日历的问题C语言,C++(boost),python,Javascript,Java和Matlab实现

    今天看到一个很有意思的话题,例的标题叙述性描述,下面: 根据以下信息来计算1901年1月1至2000年12月31适逢星期日每个月的第一天的合伙人数量? a)  1900.1.1星期一 b)  1月,3 ...