想要使用JavaScript從CSS網址中獲取圖片，以便為背景圖片設置樣式

Question

想要使用JavaScript從CSS URL獲取圖像，以便我可以使用background-size：cover和colour設置背景圖像的樣式。 該代碼僅用於通過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>如所解釋這里 ）。 因此，如果設置<img>的background-image和src ，則src只會覆蓋background-image 。

在這種情況下，我建議您只設置<div>的background-image 。

 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>