我正在使用CMS在页面顶部构建一个"英雄区"。它有一个背景图像,一些文本和几个按钮链接。我希望我的按钮与背景图像mix-blend-mode:multiply
。
我的问题是,默认的CMS CSS将按钮放在与背景图像不同的堆叠上下文中,因此它们不会混合。具体地,问题在于.inner
类具有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>
似乎如果您也将mix-blend-mode: multiply;
添加到z索引元素的样式中,它就会起作用(请参阅fiddle)。看似多余,但似乎有效。