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