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)));

这里的错误非常明显。

您应该在...jpg) -26...。

url(cards.jpg)-26.846153846153847px -36

您最后一个号码没有单位（例如px，em等）。

Answer 2

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

Example 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";

javascript背景图片没有变化

2 个答案: