我想给一个元素一个混合模式，但我不希望它影响它所包含的文本。我的想法是为此使用一个伪元素，这样文本就不会受到影响。但是，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>我不明白这里出了什么问题。
问题是将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>