我该如何在一个元素上设置mix-blend-mode,但不影响它的子元素?将子元素设置为默认值
normal
似乎无效:
normal
似乎无效:
如何避免mix-blend-mode
影响子元素的解决方案:
mix-blend-mode
;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;
}
有人评论说整个区块都被渲染了,这就是你遇到问题的原因。我通过从该区块中移除h1元素、设置绝对定位和z-index为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;
}
无法从其子元素中删除元素的mix-blend-mode。
MDN表示,mix-blend-mode
:
设置一个元素的内容如何与其父元素和元素的背景混合
为了实现所需效果,将子元素放置在单独的层叠上下文中,并确保它位于设置了mix-blend-mode
的元素之上。
要使其工作,需要两件事情:
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>
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);
}