从子元素中移除 mix-blend-mode答案

【问题标题】：Remove mix-blend-mode from child element从子元素中移除 mix-blend-mode
【发布时间】：2021-08-13 14:34:15
【问题描述】：

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

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

【问题讨论】：

这与不透明度的问题相同。并不是真的继承了属性，而是所有的block都是用这个效果渲染的

标签： css background-blend-mode

【解决方案1】：

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

使子元素位置相对，给它一个宽度和高度；
在子元素内部创建一些具有绝对位置的真实或伪元素，并对其应用mix-blend-mode；
在子元素内为您的内容创建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;
}

【讨论】：

【解决方案2】：

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

CSS isolation 属性允许选择子元素是在其父上下文中呈现（auto）还是作为新上下文的一部分，因此没有应用任何混合模式（@987654325 @)。

查看this page 的示例

【讨论】：

如果我是对的，隔离只会保护元素的兄弟姐妹免受混合混合模式的影响。它不适用于儿童。

【解决方案3】：

有人评论说整个块都是用效果渲染的，这就是你遇到问题的原因。我可以通过从块中删除 h1、绝对位置和 1 的 z-index 来完成您正在尝试做的事情。这是一个显示效果的 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/

【讨论】：

嗯，这是一个棘手的问题。虽然它完成了你想要的，但你可能不会认为这是一个解决方案，我可以理解。然而，根据我的经验，我发现有时要完成你想要的 CSS 样式，有时你必须以一种迂回的方式做事。

【解决方案4】：

不可能从其子元素中删除元素的mix-blend-mode。

MDN says那个mix-blend-mode：

设置元素的内容应该如何与元素的父元素的内容和元素的背景混合

要达到预期的效果，请将子元素放在单独的stacking context 中，并确保它呈现在设置了mix-blend-mode 的元素之上。

你需要做两件事来完成这项工作：

确保您的不透明 内容（您的文本）不是设置背景和混合模式的元素的子元素。例如，CSS Grid Layout。
确保文本呈现在设置背景和混合模式的元素之上，因此不受其影响。在您的背景上设置mix-blend-mode 将为它创建一个堆叠上下文，您可能需要为您的内容提供自己的堆叠上下文以确保它在其上方呈现。

使用 CSS Grid 定位您的元素：

用一个自动调整大小的网格区域定义一个网格容器
将背景元素和文本元素都放入该网格区域（使它们重叠）
让文本元素决定网格区域的大小
将背景元素拉伸到网格区域的大小，该大小由文本元素的大小决定

然后，在文本元素上设置isolation: isolate 以确保它呈现在上方，而不是在背景元素下方。

一个工作示例

.container {
  display: grid;
  grid-template-areas: 'item';
  place-content: end stretch;
  height: 200px;
  width: 400px;
  background-image: url(https://picsum.photos/id/237/400/200);
  background-size: cover;
  background-repeat: no-repeat;
}

.container::before {
  content: '';
  grid-area: item;
  background-color: seagreen;
  mix-blend-mode: multiply;
}

.item {
  grid-area: item;
  isolation: isolate;
  color: white;
}

h1,
p {
  margin: 0;
  padding: 10px;
}

<div class="container">
  <div class="item">
    <h1>HEADLINE</h1>
    <p>Subhead</p>
  </div>
</div>

【讨论】：

【解决方案5】：

如果您使用的是 Rashad Ibrahimov 发布的出色的伪元素 ::before/::after 解决方案，请注意。

我发现我必须从父元素中删除 z-index 并将其仅应用于伪元素和子元素，mix-blend-mode: multiply 才能起作用。

例如

#wrapper {
    position: relative;
}

#wrapper .hoverlabel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index: 90; Uncomment this to break mix-blend-mode. Tested in Firefox 75 and Chrome 81. */
}

#wrapper .hoverlabel::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    mix-blend-mode: multiply;
    z-index: 90;
    background-color: rgba(147, 213, 0, 0.95);
}

【讨论】：