从子元素中删除mix-blend-mode

Question

如何在元素上设置mix-blend-mode,但不是它的子元素？将子项设置为默认值normal似乎不起作用:

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

Answer 1

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

CSSisolation属性允许选择子元素是否应在其父级上下文中呈现 ( auto) 还是作为新上下文的一部分呈现，因此无需对其应用任何混合模式 (isolate )。

查看此页面的示例

Answer 2

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

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

活生生的例子

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 3

有人评论说整个块都渲染有效果，这就是你遇到问题的原因。我可以通过从块中删除 h1、绝对位置和 z 索引 1 来完成您想要做的事情。这是一个 jsfiddle 来显示效果。

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/