css - 从子元素中移除 mix-blend-mode

Question

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

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

Answer 1

如何避免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 2

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

有一个 CSSisolation属性允许选择子元素是应该在其父上下文中呈现（auto）还是作为新上下文的一部分，因此不应用任何混合模式（isolate）。

查看此页面以获取示例

Answer 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/

Answer 4

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

MDN说mix-blend-mode：

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

为了达到预期的效果，将子元素放置在单独的堆叠上下文中，并确保它呈现在带有mix-blend-modeset 的元素的顶部。

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

• 确保您的不透明内容（您的文本）不是设置背景和混合模式的元素的子元素。例如，使用CSS 网格布局。
• 确保文本被渲染，因此不受设置背景和混合模式的元素的影响。在您的背景上设置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>

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