我正在寻找一种方法,可以根据背景更改某个元素的背景颜色。在CSS中,您可以使用混合模式(mix-blend-mode)来实现,但我想要能够设置颜色。
最好我能够在SVG中使用相同的技巧。
为了说明我的意思,以下是一个带有混合模式的jsfiddle: https://jsfiddle.net/5p69j4st/7/
所以我希望当在绿色背景下时,具有类名 "block" 的固定元素是白色的。
最好我能够在SVG中使用相同的技巧。
为了说明我的意思,以下是一个带有混合模式的jsfiddle: https://jsfiddle.net/5p69j4st/7/
.block {
position: fixed;
top: 10px;
left: 10px;
height: 25px;
width: 25px;
background-color: #fff;
mix-blend-mode: difference;
}
.is-green {
display: block;
height: 300px;
width: 100%;
background-color: green;
}
.is-white {
display: block;
height: 300px;
width: 100%;
background-color: #fff;
}
<div class="block">
</div>
<div class="is-green">
</div>
<div class="is-white">
</div>
<div class="is-green">
</div>