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的{{1}}实际上是<img>的前台内容（如here所述）。因此，如果您同时设置了{{1}的<img>和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 + ")";

想要使用JavaScript从CSS网址中获取图片，以便为背景图片设置样式

1 个答案: