CODEWITHSUNDEEP
csshtml
X.L
X.L

Reputation: 111

mix-blend-mode doesn't work?

Inspired from this example, I create this which doesn't work. Please check the complete code from 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>

Upvotes: 4

Views: 12049

Answers (2)

Simon_Weaver
Simon_Weaver

Reputation: 145970

This is a surprisingly difficult question to find general solutions to - the answer is usually 'add a background'!

Another issue I just came across is z-index resets the stacking content so if you're expecting to blend with the background of an ancestor element this can break that.

For a simple color background you can add background: inherit to propagate the background down. Whether this makes sense or not will depend on the structure of your site - for instance it won't work for a gradient if the boxes aren't positioned on top of each other.

Upvotes: 1

Kaiido
Kaiido

Reputation: 136707

In FF your problem comes from the position:fixed of your element's parent.

I guess fixed elements can't do mix with bottom layers...

Here is an updated fiddle where the anchor's has been positioned absolutely which will work only in FF.

In chrome, it seems you need to set the element at the same level as the video -> inside the same container...

fiddle for chrome

Upvotes: 3

Related Questions