如何解决将多个蒙版图像应用于单个div
我可以在想要的div上的任意位置应用mask-image
,但是我可以在同一div上应用多个mask-image
吗?
带有单个mask-image
的示例:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,transparent 30px,black 31px
);
}
<div></div>
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask-image: radial-gradient(
circle at center top,black 31px
),radial-gradient(
circle at center bottom,black 31px
);
}
<div></div>
编辑:我知道Chrome支持mask-composite
,但是(在撰写本文时)仅适用于Chrome。
解决方法
您需要使用尺寸和位置进行游戏。遮罩的工作方式与背景图片相同,因此只需想象一下您自己在同一元素上制作两个图片(一个在顶部,另一个在底部)
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask:
radial-gradient( circle at center top,transparent 30px,black 31px) top,radial-gradient( circle at center bottom,black 31px) bottom;
-webkit-mask-size:100% 51%; /* each one half the size */
-webkit-mask-repeat:no-repeat; /* don't forget this */
}
<div></div>
一个戴着面具的想法:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask: radial-gradient(circle,black 31px) 0 100px; /* 100px is half the height */
}
<div></div>
并带有边框:
div {
width: 200px;
height: 200px;
background: radial-gradient(circle,black 0 33px,green 33px) 0 100px border-box;
border: 2px solid black;
-webkit-mask: radial-gradient(circle,black 31px) 0 100px; /* 100px is half the height */
}
<div></div>
具有蒙版复合材料的解决方案:
div {
width: 200px;
height: 200px;
background-color: green;
border: 2px solid black;
-webkit-mask:
radial-gradient( circle at center top,black 31px),linear-gradient(black,black); /* this layer is mandatory */
-webkit-mask-composite: destination-in;
mask-composite: exclude; /* for non-webkit browser */
}
<div></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。