Question

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

Answer 1

有人评论说，整个块都会被渲染出效果，这就是你遇到问题的原因。我能够通过从块移除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/

Answer 2

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

Answer 3

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

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

查看this page示例

Answer 4

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

MDN says 那个 mix-blend-mode：

<块引用>

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

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

要完成这项工作，您需要做两件事：

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

使用 CSS 网格定位您的元素：

定义一个具有一个自动调整大小的网格区域的网格容器
将背景元素和文本元素都放在一个网格区域中（以便它们重叠）
让文本元素决定网格区域的大小
将背景元素拉伸到网格区域的大小，这是由文本元素的大小决定的

然后，在文本元素上设置 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);
}

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

5 个答案: