如何在CSS中隔離頁面和div背景顏色？

Question

我正在創建登錄表單，但無法使BG顏色以我想要的方式工作。

我希望頁面具有藍綠色的整體背景顏色（#00CEB9）。我創建了一個具有不同背景的表單（讓我們只是用紅色表示演示），但深青色仍然顯示在框內。

我想框有100％的紅色背景是這樣的（同時保持藍綠色背景上的頁面的其餘部分）：

<div class="login-container"> 
    <form> 
    <label for="login">Login</label> 
    <input type="text" id="login"> 
    <label for="password">Password</label> 
    <input type="text" id="password"> 
    </form> 
</div> 

CSS

html *{ 
    background-color: #00CEB9; 
} 

.login-container { 
    margin: 8px auto; 
    border: 3px solid #f1f1f1; 
    padding: 8px; 
    border-radius: 4px; 
    width: 30%; 
    text-align: center; 
    background-color: red; 
} 

如何保持我的頁面背景nd顏色，並有一個自己的背景顏色的形式框沒有讓他們互相污染？

Answer 1

嘗試從改變你的CSS：

html *{ 
    background-color: #00CEB9; 
} 

到

html, body { 
    background-color: #00CEB9; 
} 

通過它應用到html *你把它應用到沒有已分配背景顏色的所有元素。

有關如何深入瞭解CSS選擇器的更多信息，請參閱CSS Selectors Reference。

Answer 2

問題出在你的css文件上。基本上，由於*，所以將所有html元素分配爲背景顏色：深藍色。

更改CSS來：

html { 
    background-color: #00CEB9; 
} 

Answer 3

html *意味着html元素中的每一個元素，而這不正是正是你所期待的。

您可以使用

html, body { 
    background-color: #00CEB9; 
} 

相反

Answer 4

刪除*從代碼中CSS的第一行。 *正在做的是它使所有東西＃00CEB9的背景顏色。這就是爲什麼你要查看窗體和每個文本框的背景顏色爲＃00CEB9。我希望這可以幫助