Question

一个明暗的主题。我的主题是浅色，向下是暗色（模糊）。

现在我在这个上创建了一些盒子，但我在这个主题的顶部有问题（更轻）。我要使用黑色字体，而下方框需要是白色字体，但是我不能创建黑色和白色的盒子，因为盒子会随着屏幕调整大小而移动，黑盒子可能会出现黑屏（向下）并且没有任何显示！此外，我无法为此框设置背景（出于任何原因）。你对这个问题有什么看法吗？我听说有一件事scss可以检测背景颜色和背景的浅色和深色，设置颜色（但我根本不使用背景，它是背景图像（颜色来自图像而非css）。我该怎么办对于这个问题？

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>

</head>

<style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    #Background {
        background-image: url("bc.jpg");
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
    }
    #Background .Box {
        width: 350px;
        height: 250px;
        box-shadow: 0px 0px 5px 1px rgba(20, 20, 20, 0.5);
        display: inline-block;
        margin-right: 25px;
        margin-top: 25px;
        vertical-align: top;
        padding-top: 100px;
        text-align: center;
    }

    #Background .Box span {
        font-size: 48px;
        font-weight: bold;
    }
</style>

<body>

<div id="Background">
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>
    <div class="Box"><span>TEST 1</span></div>

</div>

</body>

</html>

bc.jpg

在深色和浅色主题背景上自动更改颜色

0 个答案: