0
244
VistasModo de fusión Css Mix Fondo azul con texto blanco
Quiero cambiar el texto de carga blanco con el color de fondo negro actual a color de fondo azul (# 083d75) usando CSS min-blend-mode, ¿cómo debo hacerlo? Gracias
Aquí está mi HTML completo
<!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>
·
Juan Pablo Isaza
Responde la pregunta