给商品评分是电商网站非常重要的一个功能。而使用星星来表示评分是一种比较普遍的做法。下面我们就来看一下如何使用CSS来实现这个效果。
.star { display: inline-block; width: 18px; height: 18px; margin-right: 8px; background-image: url(star.png); background-size: cover; } .star.filled { background-position: 0 -18px; }
以上是实现星星评分的CSS代码。
首先我们创建一个名为.star的class,设置它为inline-block,然后设置宽度和高度。接着我们为它设置一张图片作为背景,这里图片的路径是star.png。可以根据实际情况进行更改。background-size属性可以保证图片在背景中全部显示。
接着我们创建一个名为.filled的class,用来表示已经被填充的星星。我们把背景图片的位置向上移动18像素,这样就可以显示出灰色星星的上方黄色部分了。
在使用这些代码时,我们可以把填充星星的数量与评分对应起来,例如如果有5个星星,分别设置5个元素为.star和1-5个元素为.filled即可。
总之,这种使用星星来表示商品评分的方式非常直观易懂,而使用CSS实现也非常简单。