Как разделить фон на два цвета html css

Несколько фоновых рисунков

Фоновые рисунки довольно часто применяются в вёрстке сайтов и оформлении элементов из-за своих широких возможностей по настройке. Вместе с тем правило, что для каждого элемента может быть только один фон порождало сложные вложенные конструкции, цель которых лишь в добавлении пустых элементов с фоновым рисунком. Гораздо проще использовать один элемент и установить для него необходимое количество фоновых изображений, перечисляя их через запятую.

Давайте рассмотрим пример, когда на веб-странице используется два вертикальных фона. Раньше для этой задачи фоновый рисунок добавлялся к селектору body и html , при этом ещё и надо установить высоту страницы 100%. Теперь гораздо проще, добавляем фоновые рисунки только к селектору body , как показано в примере 1.

Пример 1. Фон на веб-странице

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Веб-страница с двумя фоновыми картинками

Рис. 1. Веб-страница с двумя фоновыми картинками

Двойной фон не обязательно использовать исключительно с изображениями, это можно сделать и с градиентами. Разумеется, эффект будет заметен только при прозрачном или полупрозрачном цвете. В примере 2 применяется функция linear-gradient . Первый фон располагается под углом 45º и состоит из прозрачной и полупрозрачной зелёной полосы. Второй фон содержит те же самые цвета, но располагается под углом -45º. За счёт наложения одного фона на другой по центру веб-страницы появляется цепочка повёрнутых квадратиков.

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

Я создаю форму входа в систему, но я не мог заставить цвет BG работать так, как я хотел.

Я хочу, чтобы у страницы был общий цвет фона ( #00CEB9 ). Я создал форму с другим фоном (скажем, для демонстрации красным), но внутри окна все еще отображается чирок.

image with polluted BG

Я хочу, чтобы в окне было 100% красного фона, как это (при этом фоновый цвет остался на остальной части страницы):

image with isolated BG

Как я могу сохранить цвет фона моей страницы и иметь поле формы с собственным цветом фона, чтобы они не загрязняли друг друга?

4 ответа

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

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

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

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

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

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

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

Как сделать в одном header два фоновых цвета

https://prnt.sc/qhj0vb Как сделать в одном header два фоновых цвета. То-есть в первом блоке золотой цвет мы его ставим с помощью класс .header , а во втором блоке черный фоновый цвет и когда, я его ставлю в класс .header-menu он принимает значение класса .container и его ширина становится 1100px(container).
Как сделать что бы второй фон был во всю ширину?

Не могу сказать на сколько это правильно но разделить header на два блока . примерно та как в сниппете

Здесь актуальная версия с которой можно работать и можно исправлять: https://codepen.io/topicstarter/pen/ZEYXBVr

Как вариант, перенести контейнер во внутрь каждого из блоков header и задавать фон соответственно для top-header и header-menu

Можно задать для "header-container" размер 1100px, а для top-header и header-menu те цвета, которые надо.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 html5 или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *