3

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

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

是否有任何解决方法可以在不带走的情况下button与之融合？.outerposition: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>

4

1 回答 1

2

似乎如果您也添加mix-blend-mode: multiply;到 z-index'ed 元素的样式中，它将起作用（参见小提琴）。似乎是多余的，但它似乎工作。

于 2016-05-07T20:06:03.923 回答