更改不透明度叠加的颜色 - CSS

当两个不透明元素重叠时，不透明度合并。我可以告诉CSS使重叠具有不同的颜色吗？例如，我可以有两个重叠的黄色元素，并在中间变成橙色吗？更改不透明度叠加的颜色 - CSS

2017-03-06 Corbfon

目前，你不能通过纯粹的CSS。有一个CSS属性可以模拟Photoshop混合模式mix-blend-mode，目前尚未得到广泛支持。虽然混合模式仍然依赖于元素的颜色，并且您无法指定重叠部分的颜色。

div { 
 
    height: 100px; 
 
    mix-blend-mode: multiply; 
 
    position: absolute; 
 
    width: 200px; 
 
} 
 

 
.left { 
 
    background: cyan; 
 
    left: 0; 
 
} 
 

 
.right { 
 
    background: yellow; 
 
    left: 150px; 
 
}

<div class="left"></div> 
 
<div class="right"></div>

来源

2017-03-06 05:47:18 dork

看起来很甜美。我可以用它将中间的2个黄色元素更改为橙色吗？ – Corbfon

@Corbfon，不幸的是，没有。就像我在回答中所说的那样，重叠部分的颜色取决于元素的颜色。你基本上将两种颜色混合在一起，使青色+黄色=绿色。但黄色+黄色=黄色。 – dork

感谢您的意见！很遗憾听到这是不可能的...必须找到一个hacky js的方式来做到这一点 – Corbfon

纯粹通过CSS，我认为是不可能的。请试试这个答案，

How to make an transparent element overlap other elements?

https://css-tricks.com/equidistant-objects-with-css/

你可以给在通过JS运行CSS过，或者你创建一个元素的CSS类：第一个或最后一个作为第二链路建议。

来源

2017-03-06 05:56:14 Ajay2707

更改不透明度叠加的颜色 - CSS

回答

相关问题