摘抄自我趣同伴的心得：

大家可以会遇到过要做满意度用星级来评分的情况，类似这种
实现的方法有很多，大家最初想到的可能是根据满意度有多少种情况就切多少种图，然后拼在一张图里面，通过控制图片的位置来实现。

以下有一种方法实现起来会比较简单，想法来自  MATT   !!   我只是负责实现而已....    
在分享之前先给Matt  一点掌声   

这个方法只需要切一张图
原理是：覆盖！   
最简单的就是子元素覆盖父元素。
具体要怎么实现呢？
将父元素的背景设置为空心的星星。
再将子元素的背景设置为实心的星星。

根据子元素会覆盖父元素的原理，而且会继承父元素宽度的特点。 

如果不设置子元素的宽度的话，那么子元素会继承父元素宽度，完全覆盖父元素，那么就只看到子元素的背景，那么就是5颗实心的星星、。

如果要看到1颗或者是半颗实心的星星要怎么处理？

只需要设置子元素的宽度就可以了。 只需要量取一颗和半颗星星的宽度，需要多少就相应增加就可以了。
废话不多说，以下是代码：

HTML 结构：
            

CSS：\




要控制星星的数目，只需要在子元素里面加上 相对应的宽度就可以了。   是不是很方便？


如果大家有更加简便的方法，可以提出来，让大家学习学习

css sprite简便方法切 《评分五角星》的更多相关文章

  1. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  2. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  3. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  4. CSS Sprite的优缺点分析

    目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

  5. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  6. css sprite，css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  7. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  8. 判断pdf、word文档、图片等文件类型（格式）、大小的简便方法

    判断pdf.word文档.图片等文件类型(格式).大小的简便方法 很久没发文了,今天有时间就写一下吧. 关于上传文件,通常我们都需要对其进行判断,限制上传的类型,如果是上传图片,我们甚至会把图片转化成 ...

  9. CSS Sprite的应用

    什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并 ...

随机推荐

  1. 一款开源免费跨浏览器的视频播放器--videojs使用介绍

    最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...

  2. TCP ，UDP概念和TCP三次握手连接 的知识点总结

    OSI 计算机网络7层模型 TCP/IP四层网络模型 传输层提供应用间的逻辑通信(端到端),网络层提供的是主机到主机的通信,传输层提供的是可靠服务. TCP 中常说的握手指的是:连接的定义和连接的建立 ...

  3. 1Z0-053 争议题目解析685

    1Z0-053 争议题目解析685 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 685.In your test database: -You are using Recover ...

  4. jquery实现分页功能

    RT,不是很难,但是感觉代码一点都不简洁,就是多加点判断,直接上代码了. HTML部分: <div class = "container-fluid"> <div ...

  5. JavaScript 中的相等检测

    一.有时JavaScript的等价比较是一件抓狂的事情,看看这个表格就一目了然了.

  6. How PhoneGap & Titanium Works

    转载自 http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/ How PhoneGap Works As ...

  7. 实现terminal代理

    问题 作为一名Linuxer,熟练使用终端是一项必备技能,但终端中有时下载安装功能速度很慢,令人崩溃.我自然而然想到了可否加个代理,提高速度.我之前一直用shadowsocks,浏览器使用switch ...

  8. const 和 readonly

    const 和 readonly 的异同 Const readonly 字面意 不变常量,不可修改 只读操作,不可写 初始化 必须在声明的同时赋值 可在声明和构造方法中进行赋值 所属关系 类.即sta ...

  9. 创建javaScript对象的方法

    一.工厂模式 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=functi ...

  10. PHP中return 和 exit 、break和contiue 区别与用法

    先说一下exit函数的用法. 作用: 输出一则消息并且终止当前脚本. 如果一段文本中包括多个以 结束的脚本,则exit退出当前所在脚本. 比如一篇php文本包括一下代码,则输出为world. < ...