我有一块HTML用于显示带有图案和文字的图像/视频:
<div id="video_block">
<img src="montage_still.jpg" class="spacer_image">
<img src="montage_still.jpg" class="background_image">
<video width="100%;" height="auto;" muted="" preload="" autoplay="">
Sources
</video>
<div class="overlay_pattern yellow"></div>
<div class="overlay_text center_middle_text">Pride</div>
</div>
更简单的说,这些图层是:
我的目标是以下内容,大多数浏览器都会出现在图像和视频上(加载/可见时):
然而,当使用Chrome(Mac,45.0.2454.85,64位)时,只有当视频可见时,我才会收到以下信息:
这看起来很奇怪,因为当我读到时,&#34; the mix-blend-mode property defines how an element’s content should blend with its background,&#34;我假设图案叠加层会与图像/视频混合在一起,只留下上面的文字。但是,看起来Chrome正在为文本叠加div提供相同的混合效果;当我将混合模式更改为其他任何内容时,这两个元素会一致地变化。
CSS:
img.background_image,
div.video_block video {
position:absolute;
//more styles
}
div.overlay_pattern {
background-color: transparent;
background-image: none;
height: 200vh;
left: 0;
mix-blend-mode: overlay;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
div.overlay_pattern.yellow {
background: url("yellow_pattern.png") repeat scroll;
}
div.overlay_text {
color: #ffffff;
font-family: "Gotham A","Gotham B";
font-size: 8em;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px 2px rgba(60, 60, 60, 0.5);
text-transform: uppercase;
}
div.center_middle_text {
left: 0;
margin: 0 10%;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 80%;
}
有任何建议可以获得Chrome的一致行为吗? (这可能是一个错误吗?)