html - 如何在 CSS 蒙版内添加阴影？

Question

我可以在 SVG 蒙版制作的切口内添加阴影吗？

这是我正在使用的代码

index.html

<div class="content">
    <section id="home-section">
    </section>
    ...
</div>

styles.css

#home-section {
    background: url(img/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-mask: url(img/mask.svg) center/contain no-repeat;
    -webkit-mask-size: auto;
}

这是我得到的结果

但这就是我想要的结果(我在 Illustrator 中做到了):

这是 SVG:https://drive.google.com/file/d/1O7nGJHeYkgw9Al9BojSVI7f8zKzv4fbu/view?usp=sharing

Answer 1

如果您考虑像下面这样进行 mask ，

drop-shadow 过滤器可以在这里为您提供帮助:

.box {
    height:300px;
    background:url(https://picsum.photos/id/1072/800/600) center/cover;
   overflow:hidden;
}

.box div {
  filter:drop-shadow(0 0 5px black);
  height:100%;
}

.box div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  -webkit-mask:
   /* your mask here */
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left/33% auto,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center/33% auto,
     linear-gradient(#fff 0 0) right 10% top 50%/30% 80%,
    /* end of your mask*/
    linear-gradient(#fff 0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
   -webkit-mask-repeat:no-repeat;
}

<div class="box">
  <div></div>
</div>

使用您的掩码，代码将是:

.box {
    height:300px;
    background:url(https://picsum.photos/id/1072/800/600) center/cover;
   overflow:hidden;
}

.box div {
  filter:drop-shadow(0 0 5px black);
  height:100%;
}

.box div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  -webkit-mask:
    url('https://i.ibb.co/JspDMsM/thebirds-mask3.png') center/contain no-repeat,
    linear-gradient(#fff 0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
   -webkit-mask-repeat:no-repeat;
}

<div class="box">
  <div></div>
</div>