Remove mix-blend-mode from child element

浪尽此生 提交于 2019-11-29 13:38:55

问题


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/


回答1:


someone commented that the the whole block is rendered with the effect and that is why you're having the issue. I am able to accomplish what you're are trying to do by removing the h1 from the block, position absolute, and a z-index of 1. here is a jsfiddle to show the effect.

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/




回答2:


I know this was asked over two years ago, but it could be useful in the future as it could be a better solution than creating pseudo-elements.

There is the CSS isolation property that allows to choose wether the child element should be rendered in its parent's context (auto) or as part of a new context, thus without any blend mode applied to it (isolate).

Check out this page for examples




回答3:


The solution on how to avoid mix-blend-mode affects children:

  1. Make child element position relative, give it a width and height;
  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;
}


来源:https://stackoverflow.com/questions/31629541/remove-mix-blend-mode-from-child-element

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!