你的位置:首页 > 软件开发 > 网页设计 > css 实现评分效果

css 实现评分效果

发布时间:2016-01-29 18:00:10
css实现评分效果,其实是css sprit (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置。之前看到有前辈写过关于这方面的内容,在理解上稍有偏差。  我的理解:有人认为background-position 的 ...

  css实现评分效果,其实是css sprit (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置。之前看到有前辈写过关于这方面的内容,在理解上稍有偏差。

  我的理解:有人认为background-position  的位置移动中,这个属性相当于大图片不动,把div的顶点进行移动,移动到目标小图的顶点位置,

可参见:http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html        ,我个人认为应该是div位置不变,变得是图片的位置,通过background-position将所需要的小图标定位到div的 0 ,0 位置从而完成小图标显示。并且,移动中  background-position  的值是要变为负值的,说明图片是向上移动的。

单图标定位 在上边的博客写的很详细,所以直接写  五星评分效果实现:

 为了更好弄明白,把图加工了一下:css 实现评分效果

第一步:

养成良好编程习惯将每部分功能放进一个独立部分进行封装,所以在此直接 设置一个div元素:

<div class="rating"></div>

原标题:css 实现评分效果

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。