CSS Blending mit Objekten außerhalb des Stapelkontextes?

Question

Ich baue einen "Heldenbereich" oben auf meiner Seite mit einem CMS. Es hat ein Hintergrundbild, etwas Text und ein paar Schaltflächenlinks. Ich möchte meine Tasten zu mix-blend-mode:multiply mit dem Hintergrundbild.

Mein Problem ist, dass das CMS CSS-Standard die Schaltflächen in einem anderen Stapelkontext als das Hintergrundbild platziert und daher nicht überblenden. Insbesondere besteht das Problem darin, dass die Klasse .innerposition:relative und z-index:1 hat. Wenn ich das CSS überschreibe, um sie in den gleichen Kontext zu setzen position: static, dann bricht das Layout des gesamten Abschnitts.

Gibt es eine Problemumgehung, um die button mit .outer zu mischen, ohne position:relative weg von .inner zu nehmen?

.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

Es scheint, dass, wenn Sie mix-blend-mode: multiply; auf das Z-index'ed als auch Arten des Elements hinzufügen, wird es (see fiddle) arbeiten. Scheint überflüssig, aber es scheint zu funktionieren.