Как изолировать цвета фона страницы и div в CSS?

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; 
} 

Как я могу сохранить свою страницу backgrou nd и иметь коробку форм с собственным цветом фона, не загрязняя их друг друга?

Answer 1

Попробуйте изменить CSS от:

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

в

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

Применяя его html * вы подаете его ко всем элементам, которые не имеют цвет фона уже назначены.

См. CSS Selectors Reference для получения дополнительной информации о том, как развернуть селектор CSS.

Answer 2

Проблема с вашим файлом css. Вы в основном назначаете фоновый цвет: teal для всех элементов html из-за *.

Изменение CSS для:

html { 
    background-color: #00CEB9; 
} 

Answer 3

html * означает, что каждый элемент внутри элемента HTML, и это не совсем точно вы ищете.

Вы можете использовать

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

Вместо этого

Answer 4

Remove * из первой строки кода в CSS. Что делает, так это то, что он делает фоновый цвет всего # 00CEB9. Вот почему вы просматриваете фоновый цвет формы и каждого текстового поля как # 00CEB9. Я надеюсь, что это поможет