html - 使CSS过滤器:drop-shadow()遍历其他元素

我想让filter: drop-shadow()通过其他元素。这听起来可能令人困惑，让我用图片来解释一下。

<div class="h-100">
    <img src="___.svg"/>
</div>
<div class="h-100">
    <img src="___.svg"/>
</div>
<div class="h-100">
    <img src="___.svg"/>
</div>

img{
    -webkit-filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));
    filter: drop-shadow(0px 0px 150px rgba(255, 255, 209, 1));

    /* Centering the svg */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*From bootstrap*/
.h-100 {
    height: 100% !important;
}

最佳答案

您可以使用此代码

body {
  margin: 0;
}

img {
  filter: drop-shadow(0 0 30px rgba(255, 255, 209, 1));
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: yellow;
  border: none;
}

.h-100 {
  width: 15%;
  display: inline-block;
  text-align: center;
  background: black;
  padding: 150px 20px;
}

<div class="container">
  <div class="h-100">
    <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" />
  </div>
  <div class="h-100">
    <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" />
  </div>
  <div class="h-100">
    <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" />
  </div>
</div>