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

Question

我想让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;
}

Answer 1

您可以使用以下代码

​

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>

​