Смешивание CSS с объектами вне контекста стека?

Я строю "область героя" в верхней части моей страницы, используя 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>

Источник

1 ответ

Решение

Кажется, что если вы добавите mix-blend-mode: multiply; со стилями элемента z-index'а, он будет работать ( см. fiddle). Кажется излишним, но, похоже, работает.

Источник
Другие вопросы по тегам