混合模式不起作用？

Question

参考这个例子，我创建了这个，但它不能工作。请从这里检查完整的代码。

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>

- X.L

---

你具体期望什么没有起作用？请解释得更详细一些。 - S.Serpooshan

什么问题？有些视频仍在播放！ - Hemant

Answer 1

在Firefox中，你的问题来自于元素父级的position:fixed。

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

这是一个更新的示例，其中锚点已被绝对定位，仅适用于Firefox。

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

chrome的示例

- Kaiido

---

我必须关闭perspective和transform。 - redolent

有趣的是，应用transform似乎导致mix-blend属性不起作用。有人知道为什么吗？ - Mr Washington

Answer 2

这是一个令人惊讶难以找到一般解决方案的问题 - 答案通常是“添加背景”！

我刚遇到的另一个问题是，z-index 会重置堆叠内容，因此如果你希望与祖先元素的背景混合，这可能会破坏它。

对于简单的颜色背景，您可以添加background: inherit来传播背景。是否有意义取决于您的站点结构 - 例如，如果框不在彼此上面，则无法使用渐变。

- Simon_Weaver

---

如果这是你的问题，请参见 https://dev59.com/Ubroa4cB1Zd3GeqPbgEP - Simon_Weaver