Question

0

207

Views

CSS mix-blend-mode on text goes transparent or has no effect

I'm new to css/html, and I'm trying to make a page that uses a random background. I've got that part working so far, but I need a way to change the color of the text based on what color the background is. It seems like the mix-blend-mode CSS tag is what I'm looking for, but it seems that the mode either has no effect, or it makes the text completely disappear. I suspect that it has something to do with stacking, but I don't know enough to say that for sure.

Here is the relevant code:

JavaScript method to get/set background

function setBackground() {
        const URL = 'https://source.unsplash.com/random/' + screen.width + 'x' + screen.height;
        document.body.style["background-image"] = "url(\'" + URL + "\')";
        document.body.style["background-repeat"] = "no-repeat";

HTML Excerpt

<body onload="setBackground()";>
        <div class="navbar-global" id="main-navbar">
            <h1 style="text-align: center;">
                Apion's Page
            </h1>
        </div>

I have also tried putting inline mix-blend-mode CSS in the h1 tag, but that has no effect whatsoever. Changing the mode makes no difference.

CSS

.navbar-global {
    width: 300px;
    margin: auto;
    mix-blend-mode: difference;
}

And here is the full HTML file How can I make it so that mix-blend-mode acts as it should?

about 4 years ago · Juan Pablo Isaza

Answer question

0

207

CSS mix-blend-mode on text goes transparent or has no effect

Find remote jobs

Andres GPT