淘先锋技术网

首页 1 2 3 4 5 6 7
在开发网页时,常常需要在CSS中使用背景图片来美化页面。但有时会出现缓存导致图片无法更新的问题,这时我们可以在背景图片的URL中加上随机数来避免该问题出现。 要实现这个功能,我们需要在CSS中使用以下属性:

background-image: url("image.jpg?id={random}");
其中{random}使用Javascript生成随机数,可以使用以下代码:

css的背景图片怎么加随机数


var random_num = Math.floor(Math.random() * 100000);
然后将生成的随机数插入到URL中:

var background_url = "image.jpg?id=" + random_num;
document.querySelector("element").style.backgroundImage = "url('" + background_url + "')"; 
这样就可以每次创建一个新URL,从而避免浏览器缓存的问题。 另外,如果我们每次需要添加新的背景图片,并非手动修改URL,我们可以使用CSS的属性值:

background-image: url("image.jpg?id=var(--random)");
然后在Javascript中定义变量:

document.documentElement.style.setProperty('--random', Math.floor(Math.random() * 100000));
这样就实现了在CSS中添加随机数的方法,可以避免缓存导致背景图片无法更新的问题。