2017-02-15 74 views
0

我正在創建登錄表單,但無法使BG顏色以我想要的方式工作。如何在CSS中隔離頁面和div背景顏色?

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

image with polluted BG

我想框有100%的紅色背景是這樣的(同時保持藍綠色背景上的頁面的其餘部分):

image with isolated BG

<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顏色,並有一個自己的背景顏色的形式框沒有讓他們互相污染?

回答

1

嘗試從改變你的CSS:

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

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

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

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

0

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

更改CSS來:

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

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

您可以使用

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

相反

1

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