用css中的变量控制精灵图像坐标

control sprite image coordinates with variables in css

本文关键字：精灵 图像 坐标 控制 变量 css      更新时间：2023-09-26

我想在css中使用变量控制精灵图像坐标..

background: url('sprite.png') no-repeat -123px -321px; width: 23px; height: 22px;

我想要的是能够使用上面的代码行使用变量，

background: url('sprite.png') no-repeat -X -Y; width: 23px; height: 22px;

这样我就可以动态设置X和Y了

PS:我试图根据我的平均星级评级来设置精灵中点亮的星星的长度，这是一个浮点数(如3.1)。我不想用LESS或者Sass

使用Javascript: 

var yourelement = document.getElementById('yourelementsid');
yourelement.style.backgroundPosition = x + 'px ' + y + 'px';

您也可以使用内联样式的服务器端脚本返回值:

<div style="background-position: <?php echo x . 'px ' . y . 'px'; ?>;"></div>
相关文章：