Как задать цвет фона в css

Как задать цвет фона и текста веб-страницы?

Для изменения цвета фона всей веб-страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body , а для цвета текста используется свойство color, как показано в примере 1.

Пример 1. Изменение цвета фона

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

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

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

См. также

background-color
color
currentColor
text-fill-color
Атрибут bgcolor
Атрибут link
Единицы цвета в CSS
Наследование в CSS
Работа с типографикой
Фон в CSS

Как изменить цвет фона и текста веб-страницы?

Для изменения цвета фона применяется свойство background добавленное к селектору body , а для цвета текста используется свойство color , как показано в примере 1.

Пример 1. Изменение цвета веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Цвет фона   Эскапизм устойчиво дает материалистический комплекс, независимо от психического состояния пациента.

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

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

Рис. 1. Вид страницы, с измененным цветом фона и текста

Рекомендуем задавать цвет фона, даже если он белый. Дело в том, что некоторые пользователи устанавливают в браузере цвет фона по умолчанию отличный от белого. Так что если цвет явно не задан, то он меняется на другой, причем, совсем не тот, который бы хотелось в итоге получить.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

CSS: Фон

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

Список свойств для стилизации заднего фона, которые будут
рассмотрены ниже:

background-color
background-image
background-repeat
background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента (с классом wrapper) белый цвет фона:

body < background-color: #333; background-image: url('image.png'); >.wrapper

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента и внутри элемента . Если бы цвет фона для элемента не был бы установлен, то в качестве фона был бы показан фон, который установлен для , так как по умолчанию все элементы имеют прозрачный фон.

Свойство background-image позволяет указать картинку, которая будет отображаться в качестве фонового изображения для всей страницы или для отдельного элемента. В примере мы использовали фоновое изображение в качестве фона для всей страницы.

Если возникает вопрос зачем устанавливать цвет фона, когда используется фоновое изображение, то на него можно легко ответить: если по каким-либо причинам фоновое изображение не может быть загружено на страницу, в этом случае будет отображаться цвет фона.

Повтор фонового изображения

По умолчанию фоновое изображение повторяется по вертикали и по горизонтали заполняя таким образом все доступное пространство в элементе. Повтор фонового изображения можно переопределить с помощью свойства background-repeat, рассмотрим его возможные значения:

no-repeat — фоновое изображение не повторяется
repeat-x — повторяет фоновое изображение только по горизонтали
repeat-y — повторяет фоновое изображение по вертикали
repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Название документа

Украсим страничку фоновым изображением!

При добавлении изображения к фону элемента, текст может наехать на него, что может испортить впечатление от страницы. Для того, чтобы этого не случилось, для всех элементов был добавлен отступ от левого края, равный ширине картинки.

Позиционирование фонового изображения

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

body < background-image: url('img_flwr.png'); background-repeat: no-repeat; background-position: bottom right; padding-right: 230px; /*отступ от правого края равный ширине картинки*/ >

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

background-position: right;

это то же самое что и:

background-position: right center;

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

Фиксация фонового изображения

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

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

body

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

Название документа body

Объединим свойства background в одно объявление!

Объединение нескольких свойств в одно может значительно сократить ваш CSS-код, при этом никаких изменений во внешнем виде страницы не произойдет. Свойства, которые возможно объединять в одно объявление, вы можете посмотреть в нашем справочнике по CSS.

Несколько фоновых изображений

С помощью свойства background можно добавить несколько фоновых изображений к одному элементу. Для этого в качестве значения нужно указать список картинок, разделяя их запятой. Как и в случае с одной картинкой, к каждому фоновому изображению можно будет добавить дополнительные значения:

Добавление нескольких фоновых изображений поддерживается во всех новых версиях браузеров, включая IE9, однако следует учитывать, что в старых версиях браузеров, которые не поддерживают несколько фонов, правило для фона будет проигнорировано целиком.

Стоит отметить, что порядок указания картинок имеет важное значение. Первое добавляемое изображение будет отображаться над всеми остальными, последнее под всеми остальными фоновыми изображениями. Мы можем увидеть как это работает, если первым фоновым изображением задать картинку, которая не имеет прозрачных областей, в этом случае она будет перекрывать все остальные картинки, заданные для фона:

Если переставить наши картинки местами, сделав первую последней в списке, то она будет отображаться под всеми остальными изображениями, задавая основной фон для элемента:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Свойства в CSS: цвет и фон

Для того, чтобы изменить цвет текста на HTML-странице, используется свойство color. Например, чтобы сделать элемент body зеленым, пропишите в CSS-файле следующее:

Если же вы хотите изменить цвет отдельного элемента, задайте свой стиль. Допустим, вы хотите выделить заголовки красным:

Теперь на нашей странице текст выделен зеленым цветом, а заголовки ㅡ красным:

Подчеркнем, что значениями свойства color могут быть как именные цвета (red, green и т.д.), шестнадцатеричные коды цветов (#00FF00, #0000FF и пр.), а также модели RGB (rgb 255, 0, 0).

Что касается фона, то при помощи CSS его можно задавать не только странице, но любым другим элементам, например, заголовкам и абзацам. За фон отвечает свойство background:

background-color ㅡ цвет фона. Свойство не наследуется по умолчанию, однако это можно исправить, указав в значение inherit. Например, нам нужно сделать синий фон и белый заголовок на HTML-странице (элемент body):

background-color:#0000FF

background-image ㅡ фоновый рисунок. Значение данного свойства ㅡ URL изображения. После него задается путь к нужному файлу (указывается в круглых скобках):

background-image: url(tree.jpg);

Например, в нашем случае фоновым изображением будет tree.jpg, лежащий в корневом каталоге. Свет фона ㅡ синий, а цвет текста ㅡ белый:

background-repeat ㅡ повторение фонового изображения. Возможны следующие варианты:

repeat ㅡ повтор по горизонтали и вертикали.
repeat-x ㅡ повторять только по горизонтали.
repeat-y ㅡ повторять только по вертикали.
no-repeat ㅡ не повторять изображение.

background-repeat:repeat-x;

background-attachment ㅡ прокрутка фонового изображения. Речь идет о том, должен ли фоновый рисунок прокручиваться на ряду с текстом или же он должен быть неподвижен. Значения для background-attachment:

scroll ㅡ фон прокручивается вместе с текстом (идет по умолчанию).
fixed ㅡ фоновое изображение неподвижно в момент прокрутки.

background-attachment:fixed;

background-position ㅡ расположение изображения относительно окна браузера. Значение задается в процентах, единицах измерения, а также при помощи ключевых слов.

background-position:10% 30%;

background-position:50px 50px;

background-position:center top;