如何解决你能用 CSS 混合模式干净地堆叠半透明的 div 吗?
我想要一堆具有半透明背景的 DIV,例如卡片。但是,我不希望它们的 alpha 值在这样做时相加。例如在下面的示例中,我的两张卡片重叠:
我希望重叠区域不要更暗,而是与单张卡片的颜色相同(它们的不透明度和颜色都相同)。我知道我可以放置一个“支持”div 来重置 alpha 并模仿这种效果,但这很明显,因为背景不是纯色。
我正在查看 mix-blend-mode
和 background-blend-mode
,但无法确定它们中的任何一个是否达到了我想要的效果。作为熟悉 Photoshop 的人,我认为这些选项中的任何一个都不起作用,但希望有人知道它的作用。
我能想到的唯一替代方法是以编程方式制作又长又窄的 DIV 并将它们附加到我顶卡的底部以模拟堆叠效果。但是,我不确定如何根据需要最好地显示后续卡片。
解决方法
您可以模拟这种用法mask
:
.box {
height:300px;
position:relative;
background:url(https://picsum.photos/id/1018/800/600) center/cover
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0.5);
-webkit-mask:
/* your first div position / size */
linear-gradient(#fff 0 0) 20px 50px / 30% 20%,/* your second div position / size */
linear-gradient(#fff 0 0) 30px 50px / 20% 30%,/* your third div position / size */
linear-gradient(#fff 0 0) 80% 0 / 100px 200px;
/*and so on ...*/
-webkit-mask-repeat:no-repeat;
}
<div class="box">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。