从子元素中删除混合混合模式 [英] Remove mix-blend-mode from child element

问题描述

如何在一个元素上设置混合混合模式，但不是它的孩子？将子项设置为默认值 normal 似乎不起作用：

How can I set mix-blend-mode on an element, but not it's children? Setting the children to the default value of normal does not seem to work:

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

推荐答案

解决方案如何避免 mix-blend-mode 效果儿童：

The solution how to avoid mix-blend-mode effects children:

1. 使子元素位置相对，赋予其宽度和高度;


2. 在绝对位置的子对象内创建一些真实或伪元素，并应用 mix-blend-mode 到它;


3. 在孩子内为您的内容创建 inner 元素。将它置于绝对位置，并将其放在其他元素之上;

1. Make child element position relative, give it width and heigh;
2. Create some real or pseudo element inside the child with absolute position, and apply mix-blend-mode to it;
3. Create inner element inside the child for your content. Make it's position absolute, and put it on top of other elements;

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;
}

这篇关于从子元素中删除混合混合模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！