爲什麼我的標題顏色會改變？

**CSS** 
 

 
@charset "utf-8"; 
 
@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans'; 
 
/* CSS Document */ 
 
*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
} 
 
body{ 
 
\t background: #EFEFEF; 
 
\t color: black; 
 
\t font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; 
 
\t margin: 0; 
 
} 
 
header{ 
 
\t width: 100%; 
 
\t background: rgba(10,37,195,0.76); 
 
\t height: 50px; 
 
} 
 
#header-inner{ 
 
\t max-width: 1200px; 
 
\t margin: 0 auto; 
 
} 
 
nav{ 
 
\t float: right; 
 
\t padding: 10px 0; 
 
} 
 
#menu-icon{ 
 
\t height: 40px; 
 
\t width: 40px; 
 
\t display: hidden; 
 
\t background: url(../img/NAV.png) no-repeat center; 
 
} 
 
ul{ 
 
\t list-style-type: none; 
 
} 
 
nav ul li{ 
 
\t font-family: 'Alegreya Sans', sans-serif; 
 
    font-size: 150%; 
 
    display:inline-block; 
 
    float: left; 
 
    padding: 10px; 
 
} 
 
nav ul li a{ 
 
\t text-decoration: none; 
 
\t color:aliceblue; 
 
} 
 
nav ul li a:hover{ 
 
\t color: rgba(208,208,208,0.90); 
 
} 
 
/*---end navbar---*/ 
 

 
#banner{ 
 
\t width: 100%; 
 
\t height: 200px; 
 
} 
 
#banner-inner{ 
 
\t width: 100%; 
 
\t height: 50vw; 
 
} 
 
/*------media----*/ 
 

 
@media screen and (max-width: 768px){ 
 
    header{ 
 
     position: absolute; 
 
    } 
 
    #logo{ 
 
     margin: 15px 0 20px -25px; 
 
     background: url(img/RD_mobile.png) no-repeat center; 
 
    } 
 
    #menu-icon{ 
 
     display: inline-block; 
 
    } 
 
    nav ul, nav:active ul{ 
 
     display: none; 
 
     z-index: 1000; 
 
     position: absolute; 
 
     padding: 20px; 
 
     background: #6991AC; 
 
     right: 50px; 
 
     top: 60px; 
 
     border: 1px solid #FFF; 
 
     border-radius: 10px 0 10px 10px; 
 
     width: 50%; 
 
    } 
 
    nav:hover ul{ 
 
     display: block; 
 
    } 
 
    nav li{ 
 
     text-align: center; 
 
     width: 100%; 
 
     padding: 10px 0; 
 
\t } 
 
} 
 
**HTML**

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="style/homecss.css"> 
 
</head> 
 
<body> 
 
<header> 
 
     <div id="hearder-inner"> 
 
      <a href="home.html" id="logo"></a> 
 
      <nav> 
 
       <a href="#" id="menu-icon"></a> 
 
       <ul> 
 
        <li><a href="home.html" class="current">Home</a></li> 
 
        <li><a href="#" >About</a></li> 
 
\t \t \t \t \t <li><a href="#" >Gallery</a></li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </header> 
 
<!---ending header--> 
 
<section id="banner"> 
 
\t <img id="banner-img" src="img/20140505211825_YY8Un.jpeg"> 
 
</section> 
 
</body> 
 
</html>

一旦我想補充的CSS，每當頭滿足了媒體的顏色會變成暗的條件媒體。我不明白。我只在標題上添加一種顏色，爲什麼它會在導航欄變小時變成第二種顏色？

來源

2017-06-18 Troy Wu

標題本身的顏色不會改變。什麼變化是它以前佔用的空間，從而推下了圖像，但是，您將標題定位爲尺寸高達768px寬度的絕對元素。這意味着標題被從正常的文檔流中取出。現在圖像不會被壓低，而是標題與圖像重疊。

由於標題的背景alpha值小於100（background：rgba（10,37,195,0.76）;），因此僅在不透明度爲76％時，標題下方元素背景顏色的任何變化都會影響您的標題的感知顏色。我猜測圖像比標題暗，因此標題看起來變得更暗。

你可以通過定義alpha通道爲1的頭部背景來解決這個問題（例如rgb（10,37,195）;） - 考慮到你的身體背景幾乎是白色的，並且寬度超過768px只有與該常數「#efefef」值混合使用時，很容易確定適合您的顏色。或者，您可以通過不將頭從標準文檔流中取出（通過不使用絕對位置），或者通過向圖像的容器添加填充/頁邊距以及（可能）使用與文檔相同的值的文檔的其餘部分標題的高度（例如100px，如果這是標題的高度）。顯然，只有在屏幕寬度達到768px時纔會添加該功能。

來源

2017-06-18 23:03:54

感謝您的回答。我將職位的價值改變爲親戚，問題解決了。有很多關於建立網絡的技巧。我非常感謝你的幫助。我剛開始學習和建立一個網站。 –

沒問題@TroyWu和快樂編碼;） –

爲什麼我的標題顏色會改變？

回答

相關問題