css - 混合混合模式不起作用？

Question

灵感来自于此example , 我创建 this这是行不通的。完整代码请查看here .

a.videolink:link, { 
font-size: 50px; 
font-family: Arial, Helvetica, sans-serif; 
color: white;
mix-blend-mode: exclusion;
text-align: right;
width: 350px;
text-decoration: none;
}

<div style="position:fixed;left:150px;bottom:150px;">
<a id="videotittle" class="videolink" href="" target="_blank"> 
</a>
</div>

Answer 1

在 FF 中，您的问题来自元素父元素的 position:fixed。

我想固定元素不能与底层混合......

这是一个 updated fiddle anchor 的绝对定位位置仅在 FF 中有效。

在 chrome 中，您似乎需要将元素设置为与视频相同的级别 -> 在同一容器内...

fiddle for chrome