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

Question

我想使用变量控制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。

Answer 1

使用Javascript：

var yourelement = document.getElementById('yourelementsid');

yourelement.style.backgroundPosition = x + 'px ' + y + 'px';

Answer 2

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

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