javascript - 想要使用 javascript 从 css url 获取图像，这样我就可以设置背景图像的样式

Question

想要使用 JavaScript 从 CSS URL 获取图像，以便我可以使用背景大小设置背景图像的样式:封面和颜色。该代码用于简单地使用 Javascript 快速加载图像

var image = document.images[0]
var bigImage = document.createElement("img")
   bigImage.onload = function () {
    image.src = this.src
}
setTimeout(function () {
    bigImage.src = "img/large.jpg";
}, 50)

.header-image {
  padding: 200px 100px;
  background-color: #eee;
  background-size: cover;  
  height: 75vh; 
}

<img id="image" class="header-image" src="img/small.jpg" width="1200" />

        

Answer 1

src的 <img>实际上是<img>的前景内容(如解释 here )。所以，如果你设置 background-image的 <img>以及 src , src只会覆盖 background-image .

在这种情况下，我建议您只设置 background-image的 <div> .

var url = "https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg";
var element = document.querySelector('.example');
element.style.backgroundImage = "url(" + url + ")";

.example {
  width: 100px;
  height: 100px;
  
  background-color: black;
  background-size: cover;
}

<div class="example"></div>