CSS - 在Chrome中使用混合混合模式而不是视频,混合应用于上面的元素

时间:2015-09-15 14:00:44

标签: html css css3 google-chrome

我有一块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>

更简单的说,这些图层是:

  • Spacer Image (定义空间,不可见)
  • 图像
  • 视频
  • 叠加图案(黄色块设置为背景)
  • 叠加文字(白色文字放在其他所有内容上)

我的目标是以下内容,大多数浏览器都会出现在图像和视频上(加载/可见时):

Overlay elements working as expected.

然而,当使用Chrome(Mac,45.0.2454.85,64位)时,只有当视频可见时,我才会收到以下信息:

Blend of pattern overlay is also applied up to the overlay text.

这看起来很奇怪,因为当我读到时,&#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的一致行为吗? (这可能是一个错误吗?)

0 个答案:

没有答案