'Css Mix blend mode Blue background with white text

I want to change white loading text with current black background color to blue(#083d75) background color by using CSS min-blend-mode, how should I do it? Thanks

enter image description here

Here is my complete HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .loading-container {
            background-color: #f1f1f1;
            padding: 10px;
            margin: 20px;
            position: relative;
            width: 400px;
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div class="loading-container">
        <h1>loading...</h1>
    </div>

    <script>
        let addRule = (function (style) {
            var sheet = document.head.appendChild(style).sheet;
            return function (selector, css) {
                var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
                    return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
                }).join(";");
                sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
            };
        })(document.createElement("style"));

        addRule(".loading-container::after", {
            "background-color": "#fff",
            content: "''",
            position: "absolute",
            "mix-blend-mode": "difference",
            top: "0",
            left: "0",
            height: "100%",
            width: "50%",
        });
    </script>
</body>

</html>
javascripthtmljquerycss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions