自動更改黑暗與光明主題背景上的顏色

-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

它顯然是使用背景顏色，但有圖像的背景混合模式。 –

自動更改黑暗與光明主題背景上的顏色

回答

相關問題