mix-blend-mode: разница не работает с фиксированными элементами и фоновыми изображениями - PullRequest
Новая
       35

mix-blend-mode: разница не работает с фиксированными элементами и фоновыми изображениями

0 голосов
/ 24 августа 2018

Я пытаюсь реализовать два перекрывающихся элемента с эффектом наложения между ними, как показано на рисунке ниже, однако свойство mix-blend-mode, похоже, не работает, и я не могу понять, почему.

У меня есть структура HTML: 

<div class="cont_work">
    <a class="marco_img img_cover" style="background-image: url("http://bloomint.montenegrostudio.com/wp-content/uploads/2018/07/Untitled-1-1024x684.jpg"); opacity: 1;" href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">
    </a>
    <h2 class="tit_project" style="display: none;">
        <a href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">PRIVATE HOME CHEZ MICHELLE</a>
    </h2>
    <a class="marco_img img_cover" style="background-image: url("http://bloomint.montenegrostudio.com/wp-content/uploads/2018/07/Untitled-1-1024x684.jp"); opacity: 1;" href="http://bloomint.montenegrostudio.com/portfolio/proyecto-2/">
    </a>
    <h2 class="tit_project">
        <a href="http://bloomint.montenegrostudio.com/portfolio/proyecto-2/">ICFF STAND NYC</a>
    </h2>
</div>

И вот CSS, который я использую: 

.cont_work{
    .marco_img{
        position: relative;
        float: left;
        opacity: 1;
        filter: alpha(opacity=1);
        -webkit-transition: all 2s ease; /* Safari */
        transition: all .8s ease;
        &.hover {
            +.tit_project{
                display: block;
            }
        }
    }
    .tit_project{
        text-align: center;
        display: none;
        mix-blend-mode: color-burn;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        pointer-events: none;
        text-align: center;
        a{
            color:@black;
        }
    }
}

Вот чего я хочу достичь

enter image description here

И это то, что я получаю с кодом выше:

enter image description here

Вы можете увидеть реальный сценарий в прямом эфире здесь: http://bloomint.montenegrostudio.com/work

1 Ответ

0 голосов
/ 27 августа 2018

В случае, если кто-то окажется с той же проблемой, я понял это.Элемент h2 с mix-blend-mode (в моем конкретном случае) должен находиться внутри a с фоном изображения.

Пример: 

<div class="cont_work">
    <a class="marco_img img_cover" style="background-image: url("http://bloomint.montenegrostudio.com/wp-content/uploads/2018/07/Untitled-1-1024x684.jpg"); opacity: 1;" href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">
        <h2 class="tit_project" style="display: none;">
            <a href="http://bloomint.montenegrostudio.com/portfolio/proyecto-6/">PRIVATE HOME CHEZ MICHELLE</a>
        </h2>
    </a>
</div>
...