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

Цвета и фон в css

mini_css

Для указания цвета переднего плана в CSS используется свойство color:

С самим свойством все просто, гораздо интереснее обстоят дела с его значениями. Дело в том, что в CSS предусмотрено целых 5(!) вариантов для определения значения цвета: один при помощи ключевого слова, два в шестнадцатеричной нотации, и еще два – при помощи функции rgb. Что касается первых способов, они задаются в шестнадцатеричном определении (RGB или RRGGBB).

Для простых цветов можно использовать назначение (red, green, gray и т.д.), однако вряд ли вы будете на практике использовать такие обозначения, как mediumspringgreen или lightgoldenrodyellow. Использование числовых значений позволяет добиться большей гибкости при подборе цвета. В XHTML применяются шестнадцатеричные значения, они же поддерживаются и в CSS:

color: #f00; color: #ff0000;

В обоих случаях это будет полностью насыщенный красный цвет (FF – максимальная интенсивность красного канала, соответствующая 8 битам). Если вы – программист, то такое представление будет для вас привычным и достаточно удобным. Однако для других категорий разработчиков web-страниц шестнадцатеричная система счисления вовсе не является привычной, поэтому в CSS и появилась функция rgb, позволяющая указывать интенсивность составляющих цвета в десятичной нотации (от 0 до 255) и в процентах:

color: rgb(255, 0, 0); color: rgb(100%, 0%, 0%);

Здесь мы вновь определили красный цвет: в функции rgb первое значение определяет интенсивность красного цвета, второе – зеленого, а третье – синего. Таким образом, для составного цвета следует использовать два или все три значения:

Подобные значения цвета используются не только для указания цвета переднего плана, но и во всех других случаях, где требуется определение цвета.

Значение по умолчанию: зависит от браузера (как правило, черный).
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Фон

В качестве фона элемента (поверхности, на которой он отображается) можно указывать цвет или изображение. Всего для определения фона в CSS предусмотрено 5 уникальных свойств: background-color, background-image, background-repeat, background-attachment и background-position, а так же 1 сокращенное – background.

В свете уже рассмотренного свойства color, свойство background-color является самым простым – его использование аналогично, с той лишь разницей, что вместо цвета переднего плана (скажем, текста) изменится цвет фона:

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

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

Прежде, чем прейти к остальным свойствам фона, связанным с изображениями, упомянем еще одно, специальное, значение, свойства background-color – transparent (прозрачность), поскольку именно оно используется по умолчанию.

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

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

Следует сразу отметить, что использование рисунка в качестве фона отнюдь не исключает назначения цвета заднего плана: во-первых, сам рисунок может быть частично прозрачным, а во-вторых, он может занимать не всю область элемента (скажем, если используются свойство background-repeat). Более того, если рисунок по каким-либо причинам не прогрузится, то может быть нарушено восприятие страницы. Например, если рисунок темный, а текст – белый, то в случае отсутствия рисунка пользователь увидит просто белую страницу. Так что дополним пример с определением фонового рисунка еще и указанием цвета:

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

repeat. Изображение дублируется по вертикали по горизонтали, заполняя все отведенное пространство в виде мозаики (принято по умолчанию);

repeat-x. Изображение дублируется только по горизонтали;

repeat-y. Изображение дублируется только по вертикали.

no-repeat. Изображение не дублируется – отображается только одна его копия.

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

Другое свойство фона, используемое совместно с background-image – это background-attachment. Оно может принимать всего 2 значения – принятое по умолчанию scroll, при котором изображение прокручивается вместе с содержимым, и fixed, при котором фоновый рисунок становится привязанным к окну просмотра. Таким образом, если мы не хотим, чтобы фоновый рисунок прокручивался вместе с содержимым страницы, а оставался на одном и том же месте относительно окна браузера, то дополним пример таким образом:

В результате мы получили фон, состоящий из повторяющегося по горизонтали картинки, постоянно находящийся на одном и том же месте вверху страницы.
Отметим, что если бы был указан повтор по вертикали (repeat-y), то рисунок расположился бы по левой границе окна. Таким образом, можно сделать вывод, что отправной точкой вывода изображения является верхний левый угол. Если же требуется изменить начальную позицию вывода изображения (или собственно расположение фоновой картинки, если она не должна повторяться), то следует прибегнуть к такому свойству, как background-position. Оно может принимать либо абсолютные значения или значения в процентах, при этом за точку отсчета принимается верхний левый угол блока, либо значения, задаваемые ключевыми словами left, right, top, bottom и center:

Здесь мы задали вертикальное выравнивание фонового рисунка по верху и горизонтальное выравнивание правому краю. Если указать только одно значение (например, right, или 25%), то оно будет определять выравнивание по горизонтали, а вертикальное выравнивание примет значение 50% (center). Исключение составляют только значения top и bottom: если указать только одно из этих значений, то в center будет установлено выравнивание по вертикали.

ПРИМЕЧАНИЕ
Если фоновое изображение фиксировано в окне просмотра (т.е. если свойство background-attachment установлено в значение fixed), то смещения определяются относительно окна просмотра, а не относительно области элемента.

Значение по умолчанию : background-color – transparent; background-image – none; background-repeat – repeat; background-attachment – scroll; background-position – 0% 0% (top left). Наследуемые значения: нет. Применяется: ко всем элементам. Совместимость: все.

Основные стили для тэгов body, table, div и т. д.
— стиль для body <>
background-color цвет
background- image изображение
background-repeat повторение
background- attachment изображение фиксированное или совместно прокручиваемое с документом
background-position относительное расположение изображения на странице

Цвет фона в HTML

Давайте начнем с рассмотрения того, как сделать нашу первую HTML- страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

Палитра цвета

В данной таблица цветов вы можете переводить выбранный вами цвет в RGB код (для создания цвета в графическом редакторе) и HEX код (для обозначения цвета в HTML).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

Однако не рекомендуется вводить цветовую нотацию, ссылаясь на этот тип синтаксиса, поскольку мы не можем точно знать, какой цветовой оттенок соответствует компьютеру пользователя. Во многих случаях предпочтительнее использовать соответствующую шестнадцатеричную цветовую кодировку, которая позволяет нам &#8212; среди прочего &#8212; также выбирать нестандартные цветовые тона. С шестнадцатеричной записью наш пример становится:

HTML таблица цветов

Вы можете скачать палитру цветов которая сожержит более 100 цветов с названиями и кодами
Скачать палитру цветов с кодами

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

цвет ключевое слово шестнадцатеричное обозначение
оранжевый orange #ffa500
синий blue #0000ff
белый white #ffffff
желтый yellow #ffff00
серый gray #808080
коричневый brown #a52a2a
черный black #000000
красный red #ff0000
зеленый green #008000
фиолетовый violet #ee82ee

Кстати цвет фона ячейки в таблице задан вот таким образом

Количество доступных цветов зависит от видеокарты. Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.

Однако следует сказать, что подавляющее большинство компьютеров настроено отображать как минимум тысячи цветов, поэтому использование «безопасной веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).

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

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