使用& lt; img>图像作为另一个元素的背景

Use <img> image as background of another element

本文关键字：另一个 元素 背景 图像 lt img 使用      更新时间：2023-09-26

JS尝试

function preview(element) {
  var x = document.getElementById("photos").getElementsByTagName("LI");
  var nodes = document.getElementById(element).childNodes;
  for (i=0; i<x.length; i++){
        x[i].style.width = "10vw";
        x[i].style.height = "10vw";
  }
  document.getElementById('previewBox').style.background = nodes[0];
  viewClose();
}
HTML 

<ul id = "photos">
    <li onclick="preview('pic1')" id = "pic1">
        <img src = "https://38.media.tumblr.com/d88beaf3fe2964af04e8b3d57aa32e97/tumblr_n9gnc0n0Gu1tgkx81o1_1280.jpg">
    </li>
</ul>
CSS 

#photos li {
  width: 100%;
  display: inline-block;
}
#photos li{
  float: left;
  width: 18vw;
  height: 18vw;
  margin: 1.03vw;
  overflow: hidden;
  background: black;
}
#photos li > img{
  position: relative;
  bottom: 10px;
  /*-webkit-background-size: cover center center; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover center center;*/
  width: 140%;
}
#previewBox{
  width: 90vw;
  height: 50vw;
}

我想要的:

将li中的img作为#previewBox的背景。似乎没有什么真的有效，我试了很多。(我理解节点必须有一个循环或子号)。还有其他方法吗?我学过HTML, CSS, Javascript语言，没有学过jquery

使用.children而不是childNodes来跳过文本节点，否则您将无法获得您所追求的img，您将获得文本节点。

如前所述，您需要img的源，而不是元素本身。你需要用url(''): 来包装它
function preview(element) {
  var x = document.getElementById("photos").getElementsByTagName("LI");
  var nodes = document.getElementById(element).children;
  for (i=0; i<x.length; i++) {
    x[i].style.width = "10vw";
    x[i].style.height = "10vw";
  }
  document.getElementById('previewBox').style.backgroundImage = "url('" + nodes[0].src + "')";
  viewClose();
}

示例:http://codepen.io/paulroub/pen/lokFh

相关文章：