In my code (transparent text)mix-blend-mode doesn't work.why?

Answer 1

Add
body {
margin: 0;

https://code.sololearn.com/WUdbOx55JJyG/?ref=app

Answer 2

Wow! 👏👏, 👏👏👏👏

Answer 3

NISHA QURESHI
Can you see the mix-blend-mode effect in this code?

https://code.sololearn.com/WB80fnrrKMNC/?ref=app

Answer 4

You need a parent div instead of body
https://code.sololearn.com/WiPb30p7919J/?ref=app

Answer 5

Parent

QUOTE FROM MDN:

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

UNQUOTE

Answer 6

It can be p or something else except body, just for containing your h2

Answer 7

I'm not familiar with mix-blend-mode. But it seems that the background layer need to have a underneath white layer in order to blend with the text.

Try to put
html {
background-color: white;
}

Edit:
I found the solution from stackflow

Add this css
html { background: white; display: flex; height: 100%; }

https://stackoverflow.com/questions/43503755/did-chrome-safari-recently-change-the-way-mix-blend-mode-is-handled

Answer 8

Issue 711955
https://bugs.chromium.org/p/chromium/issues/detail?id=711955&q=mix-blend-mode&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

Answer 9

O.o magic

https://code.sololearn.com/Wwas0R8b232m/?ref=app

Answer 10

html{
Background-color:white;
display: flex;
min-height: 100%;
}
https://code.sololearn.com/WUdbOx55JJyG/?ref=app

Answer 11

Learner
Her code is this :
https://code.sololearn.com/WcvRZ2j78c7t/?ref=app

NISHA QURESHI
Demo of mix-blend-mode :
https://code.sololearn.com/WB80fnrrKMNC/?ref=app

If you cannot see mix-blend-mode also in this demo, it's Compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Are you running the code in computer or in mobile app?
What version of browser are you using?

Answer 12

But just in case I am wrong, I better invite a knowledgeable sololearners to explain this.
Can you help us, Calviղ ?

Answer 13

Is there any way to remove the white surrounding?

Answer 14

No,This is not my answer.I just want to know that why my code doesn't support mix-blend-mode property

Answer 15

Yes

Answer 16

Why div is added
Is it not possible without div element?