问题描述
我可以在由 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
解决方法
如果您考虑使用以下掩码,
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,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>