Несколько фоновых рисунков
Фоновые рисунки довольно часто применяются в вёрстке сайтов и оформлении элементов из-за своих широких возможностей по настройке. Вместе с тем правило, что для каждого элемента может быть только один фон порождало сложные вложенные конструкции, цель которых лишь в добавлении пустых элементов с фоновым рисунком. Гораздо проще использовать один элемент и установить для него необходимое количество фоновых изображений, перечисляя их через запятую.
Давайте рассмотрим пример, когда на веб-странице используется два вертикальных фона. Раньше для этой задачи фоновый рисунок добавлялся к селектору body и html , при этом ещё и надо установить высоту страницы 100%. Теперь гораздо проще, добавляем фоновые рисунки только к селектору body , как показано в примере 1.
Пример 1. Фон на веб-странице
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Веб-страница с двумя фоновыми картинками
Двойной фон не обязательно использовать исключительно с изображениями, это можно сделать и с градиентами. Разумеется, эффект будет заметен только при прозрачном или полупрозрачном цвете. В примере 2 применяется функция linear-gradient . Первый фон располагается под углом 45º и состоит из прозрачной и полупрозрачной зелёной полосы. Второй фон содержит те же самые цвета, но располагается под углом -45º. За счёт наложения одного фона на другой по центру веб-страницы появляется цепочка повёрнутых квадратиков.
Как изолировать страницу и разделить цвета фона в CSS?
Я создаю форму входа в систему, но я не мог заставить цвет BG работать так, как я хотел.
Я хочу, чтобы у страницы был общий цвет фона ( #00CEB9 ). Я создал форму с другим фоном (скажем, для демонстрации красным), но внутри окна все еще отображается чирок.
Я хочу, чтобы в окне было 100% красного фона, как это (при этом фоновый цвет остался на остальной части страницы):
Как я могу сохранить цвет фона моей страницы и иметь поле формы с собственным цветом фона, чтобы они не загрязняли друг друга?
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.