CSS - 具有 2 个背景图像的元素 - 如何在其中一个背景图像周围放置阴影？

Question

我有一个带有两个背景图像的 div 元素，两者都是使用 JavaScript 添加的。 第一个背景图像位于 div 顶部，根据“data-img”属性设置，而第二个背景图像始终相同。

HTML

<div class="card" data-img="https://placehold.co/130x130"></div>

JS

document.querySelectorAll(".card").forEach(card => 
card.style.background = "url(" + card.dataset.img + ") no-repeat center top 20px, url(https://placehold.co/50x50) no-repeat center bottom 20px");

是否可以 - 使用“filter: drop-shadow”或其他方式 - 在第一个图像周围放置阴影？

document.querySelectorAll(".card").forEach(card => 
card.style.background = "url(" + card.dataset.img + ") no-repeat center top 20px, url(https://placehold.co/50x50) no-repeat center bottom 20px");

.card {
border: 1px solid black;
height: 250px;
width: 200px;
}

<div class="card" data-img="https://placehold.co/130x130"></div>

Answer 1

您可以使用伪元素。遗憾的是，对

url(data-img, url)

的支持并不存在，但您可以在元素上设置一个指向 URL 的 CSS 变量，并将其添加为伪元素的内容。然后只需向您的伪元素添加一个盒子阴影即可。

奖励：无需 JavaScript。

.card {
  position: relative;
  border: 1px solid black;
  height: 250px;
  width: 200px;
  background: url(https://placehold.co/50x50) no-repeat center bottom 20px
}

.card::before {
  content: url(data-img, url); /* Proposed for future CSS, but doesn't work */
  content: var(--background);
  position: absolute;
  z-index: -1;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 2px 2px 8px 0px #333;
}

<div class="card" style="--background: url(https://placehold.co/130x130)"></div>