Question

我正尝试实现两个重叠的元素，并使其具有混合效果，如下图所示，但是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

Answer 1

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

混合混合模式：区别不适用于固定元素和背景图像

1 个答案: