时间戳

首页 > 解决方案 > 混合混合模式：差异不适用于固定元素和背景图像

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

问题描述

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

标签： csseffectsmix-blend-mode

解决方案

万一有人发现自己有同样的问题，我想通了。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>

推荐阅读