本文主要是介绍前端-css,五角星打分,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
想展示这样的五角星。
思路:
展示2个大小、位置(位置一样可以用postion定位,这样后面压住前面)、一模一样的图片【可以用盒子模型包装,也可以用背景】。
被压住的图片,画的是5颗白色空星星。
在上面负责压住的图片,展示的是5颗金色的星星
最后,控制金色星星所在盒子的宽度,实现此现象
这是原图
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;margin: 100px auto;position: relative;}.box span {position: absolute;top:0;left:0;display: block;width: 180px;height: 24px;background: url(images/pingfen.png) no-repeat ;}.box .one{background-position : 0 -24px ;}.box .two{background-position : 0 -60px ;}</style>
</head>
<body><div class="box"><span class="one"></span><span class="two"></span></div>
</body>
</html>
<script type="text/javascript">var two = document.getElementsByClassName("two")[0];// 图片width总长度180,分5份,每份36 px// 用户打分3.5如下two.style.width = 3.5* two.offsetWidth/5 + "px";
</script>
结果如图:
小知识点:
①同级别标签,均定位,在后面的默认压盖前面的标签
②【精灵图片】,在css中经常用到,是指把好几个小图片制作在一张图片上,使用时,都引用同一张图片,但是展示这张图片的位置不同,所以看到的效果不同。
这篇关于前端-css,五角星打分的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!