Css 混合混合模式：不使用固定元素和背景图像的差异

我正在尝试实现两个重叠元素，它们之间具有混合效果，如下图所示，但是“混合模式”属性似乎不起作用，我无法找出原因

这是我的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>

这就是我希望实现的目标

这就是我从上面的代码中得到的：

---

你可以在这里看到真实的现场场景：

以防有人发现自己也有我发现的问题。在我的特殊情况下，具有混合模式的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>

---

万一有人发现自己也有同样的问题，我就想出来了。在我的特殊情况下，具有混合模式的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>