Question

<img>有一个父级（<div>），我希望父级具有img的{{1}}属性（src ）。因此，我想尝试在CSS中为父级读出子级（assets/picture.png）的属性。

img

/*pseudo css*/
div {
   background-image:url(attr(img src));
}

Answer 1

您必须为此使用JavaScript或jQuery。这是一个简单的jQuery解决方案：

$("div").css("background-image", `url${$("div img").attr("src")}`);

纯JavaScript（ES6）：

document.querySelector("div").style.backgroundImage = `url${document.querySelector("div img").getAttribute("src")}`;

纯JavaScript（ES5）：

document.querySelector("div").style.backgroundImage = "url" + document.querySelector("div img").getAttribute("src");

Answer 2

您可以使用 JQuery / Javascript 来解决此问题：

$("div").css({'background-image':'url('+String($("div img").attr('src'))+')'});

div{
  width: 200px;
  height: 100px;
  background-position: center;
  background-size: cover;
}
img{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img src="https://www.step-outside.nl/wp-content/uploads/2019/03/doelgroep-levensvragen-en-zelfregie.jpg">
</div>

但是，通过使用 CSS 可以达到类似的效果。您确保缩放img属性，并使用position: absolute;，left: 50%;，right: 50%;和transform: translate(-50%, -50%);来确保它位于div的中间。 >

div{
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 200px;
}
div img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div>
  <img src="https://www.step-outside.nl/wp-content/uploads/2019/03/doelgroep-levensvragen-en-zelfregie.jpg">
</div>

Answer 3

尝试在每个图像上添加一个类，然后像这样在您的背景上添加网址

 <div class="background"><div/>


.background {
   background : url("./folder/img.jpg") 0 no-repeat;
}

例如

attr（）可以读取子元素的属性吗？

3 个答案: