Question

我正在建立一个英雄区＆＃34;在我的页面顶部使用CMS。它有一个背景图像，一些文本和几个按钮链接。我希望我的按钮与mix-blend-mode:multiply一起显示背景图像。

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

是否有任何解决方法可以让button与.outer混合而不会position:relative远离.inner？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

似乎如果你将mix-blend-mode: multiply;添加到z-index'ed元素的样式中，它也会起作用（see fiddle）。似乎多余，但似乎有效。

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

1 个答案: