如何解决CSS mask 和 clip-path 都阻碍了 Safari 页面上的其他元素
我有一个项目,我需要同时使用剪辑路径和蒙版,以便在 div 上获得某种渐变着色。我使用剪辑路径和蒙版来包含 div 边框内的颜色。
这在 Chrome 和 Firefox 中都可以正常工作。但是在 Safari 中,其他元素仍然隐藏在被屏蔽的元素之后,无法进行交互。正如您在下面的代码段中看到的,我添加了 2 个示例。一个使用剪辑路径,另一个使用蒙版。在 Safari 中,无法与绿色 div 进行交互。
#clip-container {
width: 4rem;
height: 3rem;
background-color: yellow;
clip-path: inset(0);
}
#clip-container::after {
content: '';
position: absolute;
width: 5rem;
height: 6rem;
background-color: red;
}
#covered-container {
width: 4rem;
height: 2rem;
background-color: green;
}
#covered-container:hover {
background-color: purple;
}
#mask-container {
margin-top: 3rem;
width: 4rem;
height: 3rem;
border: 1px solid blue;
-webkit-mask: linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0);
}
#mask-container::after {
content: '';
position: absolute;
width: 5rem;
height: 6rem;
background-color: pink;
}
#second-covered-container {
width: 4rem;
height: 2rem;
background-color: green;
}
#second-covered-container:hover {
background-color: purple;
}
<div id="clip-container"></div>
<div id="covered-container"></div>
<div id="mask-container"></div>
<div id="second-covered-container"></div>
解决方法
自行控制堆叠上下文,不要保留默认值:
#clip-container {
width: 4rem;
height: 3rem;
background-color: yellow;
clip-path: inset(0);
position:relative;
z-index:0;
}
#clip-container::after {
content: '';
position: absolute;
z-index:-1;
width: 5rem;
height: 6rem;
background-color: red;
}
#covered-container {
width: 4rem;
height: 2rem;
background-color: green;
position:relative;
}
#covered-container:hover {
background-color: purple;
}
#mask-container {
margin-top: 3rem;
width: 4rem;
height: 3rem;
border: 1px solid blue;
-webkit-mask: linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0);
}
#mask-container::after {
content: '';
position: absolute;
z-index:-1;
width: 5rem;
height: 6rem;
background-color: pink;
}
#second-covered-container {
width: 4rem;
height: 2rem;
background-color: green;
position:relative;
}
#second-covered-container:hover {
background-color: purple;
}
<div id="clip-container"></div>
<div id="covered-container"></div>
<div id="mask-container"></div>
<div id="second-covered-container"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。