从子元素移除mix-blend-mode

Question

如何在一个元素上设置mix-blend-mode，而不是它的子元素？将子项设置为默认值normal似乎不起作用：

http://jsfiddle.net/uoq916Ln/1/

Answer 1

如何避免mix-blend-mode影响孩子的解决方案：

1. 使子元素相对位置，给它一个宽度和高度；
2. 在子元素内创建一些具有绝对位置的真实或伪元素，并对其应用mix-blend-mode；
3. 在子元素内为您的内容创建inner元素。将其设置为绝对位置，并将其放在其他元素之上；

Live example

html

<div class="bkdg">
    <div class="blend">
        <div class="inner">
            <h1>Header</h1>
        </div>
    </div>
</div>

css

.blend {
    position: relative; /* Make position relative */
    width: 100%;
    height: 100%;
}

.blend::before { /* Apply blend mode to this pseudo element */
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: green;
    mix-blend-mode: multiply;
}

.inner { /* This is our content, must have absolute position */
    position: absolute;
    z-index: 2;
}

h1 {
    color: white;
}

Answer 2

有人评论说，整个区块都是用效果渲染的，这就是为什么你会有这个问题。我可以通过从块中删除h1，绝对位置和z索引1来完成你想要做的事情。

html

<div class="bkdg">
    <h1>Header</h1>
    <div class="blend">
    </div>
</div>

css

.blend {
    background-color: green;
    mix-blend-mode: multiply;
    width: 700px;
    height: 35px;
}
h1 {
    color: white;
    position: absolute;
    top: -15px; left: 10px;
    z-index: 1;
}

https://jsfiddle.net/jckot1pu/

Answer 3

我知道这是两年前提出的，但它在未来可能会很有用，因为它可能是一个比创建伪元素更好的解决方案。

有一个CSS isolation属性，允许选择是在父元素的上下文(auto)中渲染子元素，还是将其作为新上下文的一部分呈现，因此不会对其应用任何混合模式(isolate)。

有关示例，请查看this page