CSS 与堆叠上下文之外的对象混合？

Question

我正在使用 CMS 在我的页面顶部构建一个 "hero area"。它有一个背景图像、一些文本和几个按钮链接。我希望我的按钮 mix-blend-mode:multiply 带有背景图片。

我的问题是默认 CMS CSS 将按钮置于与背景图像不同的堆叠上下文中，因此它们不会混合。具体来说，问题是 .inner class 有 position:relative 和 z-index:1。如果我覆盖 CSS 以将它们放在相同的上下文 position: static 中，那么整个部分的布局就会中断。

是否有任何变通方法可以让 button 与 .outer 混合而不将 position:relative 与 .inner 分开？

.outer
{
    padding: 50px;
    background: url(https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg); 
    background-size: 300px 300px;
    height: 200px;
    width: 200px;
}
.inner {
    position: relative; 
    z-index: 1; 
}
button { 
    background-color: rgba(18,76,150,0.87);
    color: #ffffff;
    mix-blend-mode: multiply; 
    padding: 25px;
    display:block;
}

<div class="outer">
    <div class="inner">
        <button>(Different stack) Does not blend</button>
    </div>
    <div>
        <button>(Same stack) Does blend</button>
    </div>
</div>

Answer 1

似乎如果您也将 mix-blend-mode: multiply; 添加到 z-index 元素的样式中，它将起作用 (see fiddle)。看似多余，但似乎有效。

CSS 与堆叠上下文之外的对象混合？

CSS blending with objects outside stacking context?

css

blending

mix-blend-mode