html - 如何在 CSS 蒙版内有阴影?
问题描述
我可以在 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,<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>
推荐阅读
- jqgrid - jqgrid,如何在删除行之前发布字段
- android-studio - Android Studio 上的错误太多了
- powerbi - 如何计算一列中的数字或行数,按 Power BI 中另一列中的值分组
- sql - 根据其他列中的值添加 PostgreSQL 列约束
- c# - WebApi:在 ApiController 之外创建自定义 BadRequest 状态
- c++ - 我们可以在 std::array 中使用传统的指针算法吗?
- php - 在 wordpress 创世纪中删除类“屏幕阅读器文本”
- mysql - 在两个单独的字符串中查找相似的子字符串
- ios - 如何使用 Unity 在 iOS 上验证 Firebase?
- scala - 我想将 Map[String, String] 保存到磁盘,然后以相同的类型读回。不知何故,我的 sparkContext 找不到 collectAsMap 方法