时间戳

首页 > 解决方案 > 文本上的 CSS 混合模式变为透明或无效

javascript - 文本上的 CSS 混合模式变为透明或无效

问题描述

我是 css/html 的新手，我正在尝试制作一个使用随机背景的页面。到目前为止，我已经完成了该部分的工作，但是我需要一种方法来根据背景颜色更改文本的颜色。似乎mix-blend-modeCSS 标签是我正在寻找的，但似乎该模式要么没有效果，要么使文本完全消失。我怀疑它与堆叠有关，但我没有足够的知识可以肯定地说。

以下是相关代码：

获取/设置背景的 JavaScript 方法

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 摘录

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

我也尝试将内联mix-blend-modeCSS 放入h1标签中，但这没有任何效果。改变模式没有区别。

CSS

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

这是完整的 HTML 文件 ，我怎样才能让它mix-blend-mode发挥应有的作用？

标签： javascripthtmlcss

解决方案

推荐阅读