CSS blending with objects outside stacking context?

Question

I am building a "hero area" at the top of my page using a CMS. It has a background image, some text, and a couple button links. I want my buttons to mix-blend-mode:multiply with the background image.

My problem is that the default CMS CSS puts the buttons in a different stacking context from the background image and therefore they do not blend. Specifically, the problem is that the .inner class has position:relative and z-index:1. If I overwrite the CSS to put them in the same context position: static, then the layout of the whole section breaks.

Is there any workaround to get the button to blend with .outer without taking position:relative away from .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

It seems that if you add mix-blend-mode: multiply; to the z-index'ed element's styles as well, it will work (see fiddle). Seems redundant, but it seems to work.