摘抄自我趣同伴的心得：

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

以下有一种方法实现起来会比较简单，想法来自  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. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  2. OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(1)

    图像的几何变换是在不改变图像内容的前提下对图像像素的进行空间几何变换,主要包括了图像的平移变换.镜像变换.缩放和旋转等.本文首先介绍了图像几何变换的一些基本概念,然后再OpenCV2下实现了图像的平移 ...

  3. Centos 7 开启端口

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

  4. 移动开发viewport

    三种 viewport layout viewport:文档流的 css 宽度,是一个静态的值,使用 document.documentElement.clientWidth 获取,在meta中是 w ...

  5. [Web API] Web API 2 深入系列(2) 消息管道

    目录 HttpMessageHandler Web Host模式处理过程 Self Host模式处理过程 HttpMessageHandler Web API处理管道由一系列HttpMessageHa ...

  6. 分享一个UI与业务逻辑分层的框架(三)

    序言 前两篇讲解了UIMediator框架的使用及具体原理代码.本篇讲述MediatorManager的实现代码及展望. MediatorManager MediatorManager的作用有两点: ...

  7. animation-fill-mode的一些思考

    animation-fill-mode是css3动画的一个属性,它能够控制元素在动画执行前与动画完成后的样式.一个带有延迟,并且按正常方向执行的动画(正常方向是指从0%运行到100%),执行一次的过程 ...

  8. 数据结构(C语言第2版)-----数组，广义表，树，图

    任何一个算法的设计取决于选定的数据结构,而算法的实现依赖于采用的存储结构. 之前线性表的数据元素都是非结构的原子类型,元素的值是不可再分的.下面学习的这两个线性表是很特殊的,其中数据元素本身也可能是一 ...

  9. 在Winform程序中设置管理员权限及为用户组添加写入权限

    在我们一些Winform程序中,往往需要具有一些特殊的权限才能操作系统文件,我们可以设置运行程序具有管理员权限或者设置运行程序的目录具有写入的权限,如果是在操作系统里面,我们可以设置运行程序以管理员身 ...

  10. 4、python列表

    1.末尾追加:append() s = ["a", "b", "c"] print(s) #['a', 'b', 'c'] s.append ...