JavaScript背景图像不变

Question

我需要更改img元素的背景图像，以便我可以显示一个精灵（在这种情况下是卡片精灵）

我有这个代码：

 document.getElementById("cardImg").style.background = "url(cards.jpg)" + (-349 / 13 * card) + "px " + (-36 * Math.floor(Math.random() * 4));

其中card变量是从 0 到 12
的数字这是一个更大函数的一部分，但是当我执行该函数时，图像有时不会改变，有时确实会改变。

而且我已经尝试过将url(cards.jpg)更改为url(cards.jpg?v=Math.random())之类的事情，但这不会改变任何东西

感谢您的帮助

Answer 1

let card = 1;
console.log("url(cards.jpg)" + (-349 / 13 * card) + "px " + (-36 * Math.floor(Math.random() * 4)));

这里的错误非常明显。

1. 您应该有一个将...jpg) -26...与url(cards.jpg)-26.846153846153847px -36分开的空间。
2. 您在最后一个数字处没有单位（例如，px、em等）。

Answer 2

请参阅此小提琴以供参考。

示例 https://jsfiddle.net/trupti11/0yofLkfu/

.JS

var cards = "https://i.imgur.com/kABxZg1";
var posX = 200;
var posY = 500;
document.getElementById("cardImg").style.background = "url(" + cards + ".jpg) "+posX+"px "+ posY+"px";