摘抄自我趣同伴的心得：

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

以下有一种方法实现起来会比较简单，想法来自  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. php使用post动态选择头像和js事件动态改变头像

    <html> <head> <meta http-equit="Content-type" content="text/html" ...

  2. Difference Between HashMap and IdentityHashMap--转

    原文地址:https://dzone.com/articles/difference-between-hashmap-and Most of the time I use HashMap whenev ...

  3. 如何添加并设置远程桌面（RD）授权服务器

    上一篇日志中介绍了如何将现成的远程桌面授权服务器添加到对应的远程桌面回话主机中. 本篇日志将引导您如何添加配置相应的远程桌面授权服务器,这样就可以根据所购买的授权类型和授权级别添加需要甚至" ...

  4. Oracle数据库备份、恢复及常见问题

    通常我们都是使用PL/SQL Developer来对Oracle中的数据对象和数据进行管理.如果我们想方便快速还原或者部署Oracle到新机器上,怎么进行数据库的备份.导入恢复呢? 这里我们必须要考虑 ...

  5. centos7 mysql数据库安装和配置

    一.系统环境 yum update升级以后的系统版本为 [root@yl-web yl]# cat /etc/redhat-release CentOS Linux release 7.1.1503 ...

  6. Java中读文件操作

    InputStream & Reader InputStream(字节流),如下是InputStream的层次结构: AudioInputStream:音频输入流类,该方法可以: 从外部音频文 ...

  7. Centos 7 开启端口

    CentOS 7 默认没有使用iptables,所以通过编辑iptables的配置文件来开启80端口是不可以的 CentOS 7 采用了 firewalld 防火墙 如要查询是否开启80端口则: 1 ...

  8. RabbitMQ原理与相关操作(二)

    接着 上篇随笔 增加几个概念: RabbitMQ是一个在AMQP(高级消息队列协议)标准基础上完整的,可服用的企业消息系统. AMQP模型的功能组件图(上图摘自 Sophia_tj 的 第2章 AMQ ...

  9. cookie设置保存用户名，填入中文名之后出现的错误500问题

    对于问题发生的原因以后再来补充: 解决方法就是在dologin.jsp当中使用URLEncode工具类,这个工具类在java的net包当中 <一>用户浏览器-->jsp  的过程 1 ...

  10. .Net语言 APP开发平台——Smobiler学习日志：实现在手机上调用摄像头进行扫描

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...