混合混合模式：差异不适用于固定元素和背景图像答案

【问题标题】：mix-blend-mode: difference not working with fixed elements and background images混合混合模式：差异不适用于固定元素和背景图像
【发布时间】：2018-08-24 13:16:20
【问题描述】：

我正在尝试实现两个重叠元素，它们之间具有混合效果，如下图所示，但是 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;
        }
    }
}

这就是我想要实现的目标

这就是我通过上面的代码得到的：

你可以在这里看到真实的现场场景：http://bloomint.montenegrostudio.com/work

【问题讨论】：

标签： css effects mix-blend-mode

【解决方案1】：

如果有人发现自己有同样的问题，我想通了。具有mix-blend-mode（在我的特定情况下）的h2 元素需要位于具有图像背景的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>

【讨论】：