自动更改黑暗与光明主题背景上的颜色

-1

明暗主题。我的主题是轻快，黑暗的颜色（模糊）。自动更改黑暗与光明主题背景上的颜色

现在我对这个他们创造了一些盒子，但我对这个主题（较轻）的顶部已经问题。我必须使用黑色字体，下面的框需要是白色的字体，但是我不能创建黑白框，因为框会随着屏幕大小而移动，而黑色框可能会变成黑色屏幕（向下）并且什么也没有显示！此外，我无法为此框设置背景（出于任何原因）。你对这个问题有任何疑问吗？我听说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

来源

2016-08-16 Samethings

听说一两件事，SCSS可以检测背景颜色和光线和背景的黑电平，设置颜色

^从来没有听说过这，将是一个有用的壮举确定。

一个解决办法是，以响应类添加到例如每一节一个div可能看起来像

<div class="small-dark medium-dark large-light xlarge-light"></div>

在这里您将不得不为每个类媒体查询和例子是：

@media only screen and (max-width: 767px){ 
    .small-dark { 
    // Dark Styling Here 
    } 
    .small-light { 
    // Light Styling Here 
    } 
}

^您可以为每个媒体查询执行此操作，并且您必须手动检查屏幕分辨率才能知道要将哪些类添加到div。而不是重复自己的每种风格，我会在SASS这里使用extends。

来源

2016-08-16 10:40:44

我没有understant它。但它缝是这样解决的。你能否修复源代码（源文件已更新）？ – Samethings

通常我会帮你解决这个问题，但我认为SO的好人喜欢在教程写作时促进学习，他们没有错。尝试寻找更多关于编写[媒体查询]（https://css-tricks.com/logic-in-media-queries/）和[这里]（https://www.freecodecamp.com/）的示例获得免费和更全面的理解。学习如何正确做事，时间不是很糟糕。 –

这并不理想，浏览器支持也不是很好，但mix-blend-mode可能是一个选项。

Mix-blend-mode @ MDN

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: linear-gradient(to bottom, pink, purple); 
 
    height: 100vh; 
 
} 
 
h1 { 
 
    font-size: 3em; 
 
    color: white; 
 
    mix-blend-mode: difference; 
 
}

<h1>MY TEXT</h1> 
 
<h1>MY TEXT</h1> 
 
<h1>MY TEXT</h1> 
 
<h1>MY TEXT</h1> 
 
<h1>MY TEXT</h1>

来源

2016-08-16 10:55:57

我的背景颜色是图像颜色不是CSS颜色。所以我不认为混合混合检测背景颜色。请检查来源（更新后）。 – Samethings

它显然是使用背景颜色，但有图像的背景混合模式。 –

自动更改黑暗与光明主题背景上的颜色

回答

相关问题