CSS 伪元素上的 Mix-Blend-Mode

Question

我想为元素提供混合混合模式，但我不希望它影响它包含的文本。我的想法是为此使用一个伪元素，这样文本就不会受到影响。但是mix-blend-mode效果根本不生效

效果应应用于 .blue-column（100% 高度列）为了更好地理解这里是一个片段：

https://codepen.io/ChickenCat/pen/YzGmaqx

:root {
  --col-width: 200px;
  --border-offset: 20px;
  --document-height: calc(933px - (var(--border-offset) * 2));
  --document-width: calc(595px - (var(--border-offset) * 2));
  --blue: rgb(0, 86, 164);
}

div.blue-column::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  content: '';
  background: linear-gradient(rgba(17, 64, 114, 1), rgba(22, 98, 173, 1));
  mix-blend-mode: multiply;
  z-index: -1;
}

.blue-column {
  --left-offset: 50px;
  color: white;
  position: absolute;
  left: var(--left-offset);
  top: var(--border-offset);
  right: calc(100% - (var(--left-offset) + 200px));
  bottom: -1px;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 224;
}

div.header::after {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 268px;
  width: 300px;
  content: '';
  background: linear-gradient(90deg, rgba(0, 52, 102, 1), rgba(0, 86, 164, 1));
  mix-blend-mode: multiply;
}

.container {
  position: relative;
  padding: var(--border-offset);
  border: 1px solid var(--blue);
  min-width: var(--document-width);
  max-width: var(--document-width);
  min-height: var(--document-height);
}

.header {
  width: 100%;
  height: 268px;
  margin: 0;
}

.header img {
  width: 100%;
  height: auto;
}

.body {
  padding-top: 20px;
  padding-left: 243px;
  padding-right: 20px;
  min-width: 276px;
  min-height: 608px;
}

<body>
  <div class="container">
    <div class="header">
      <img src="https://www.fillmurray.com/640/360">
    </div>
    <div class="body">
    </div>
    <div class="blue-column">
      <div class="logo">
      </div>
      <div class="column-content">
        This text should be white and not affected by the mix-blend-mode.
      </div>
    </div>
  </div>
</body>

我不明白这是什么问题。

Answer 1

问题是应用于创建堆叠上下文的蓝色列的 z-index。您需要删除它并更新其中一张图片以确保它保持在下方：

:root {
  --col-width: 200px;
  --border-offset: 20px;
  --document-height: calc(933px - (var(--border-offset) * 2));
  --document-width: calc(595px - (var(--border-offset) * 2));
  --blue: rgb(0, 86, 164);
}

div.blue-column::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  content: '';
  background: linear-gradient(rgba(17, 64, 114, 1), rgba(22, 98, 173, 1));
  mix-blend-mode: multiply;
  z-index: -1;
}

.blue-column {
  --left-offset: 50px;
  color: white;
  position: absolute;
  left: var(--left-offset);
  top: var(--border-offset);
  right: calc(100% - (var(--left-offset) + 200px));
  bottom: -1px;
  padding-left: 15px;
  padding-right: 15px;
}

div.header::after {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 268px;
  width: 300px;
  content: '';
  background: linear-gradient(90deg, rgba(0, 52, 102, 1), rgba(0, 86, 164, 1));
  mix-blend-mode: multiply;
}

.container {
  position: relative;
  z-index:0;
  padding: var(--border-offset);
  border: 1px solid var(--blue);
  min-width: var(--document-width);
  max-width: var(--document-width);
  min-height: var(--document-height);
}

.header {
  width: 100%;
  height: 268px;
  margin: 0;
  position: relative;
  z-index: -1; /* HERE */
}

.header img {
  width: 100%;
  height: auto;
}

.body {
  padding-top: 20px;
  padding-left: 243px;
  padding-right: 20px;
  min-width: 276px;
  min-height: 608px;
}

<body>
  <div class="container">
    <div class="header">
      <img src="https://www.fillmurray.com/640/360">
    </div>
    <div class="body">
    </div>
    <div class="blue-column">
      <div class="logo">
      </div>
      <div class="column-content">
        This text should be white and not affected by the mix-blend-mode.
      </div>
    </div>
  </div>
</body>

CSS 伪元素上的 Mix-Blend-Mode

CSS Mix-Blend-Mode on pseudo element

css

pseudo-element

mix-blend-mode