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

Задание фона с помощью CSS свойства Background

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

Изменение фонового цвета блока с помощью CSS свойства background-color

Мы можем устанавливать цвет фона с помощью всех доступных цветовых схем CSS

Задание фонового изображения с помощью CSS свойства background-image

CSS свойство background-image, позволяет нам установить фоновое изображение, например использовать в качестве изображения картинку, расположенную по заданному url адресу

Повторение фонового изображения с помощью CSS свойства background-repeat

Данное свойство позволяет размножить изображение маленького размера по всему размеру блока методом дублирования изображения по оси x и y. По умолчанию, это свойство установлено в значение repeat, и повторяется по обоим осям, это первое что пугает начинающего верстальщика — вы хотели установить маленький логотип в углу экрана, а в результате он продубливался по всему блоку.

Вот список значений , которые может принимать свойство background-repeat:

  • repeat. Изображение дублируется по всем осям.
  • no-repeat. Картинка не дублируется (здесь ваше спасение)
  • repeat-x. Повторяется только по горизонтали
  • repeat-y. Только по вертикали

Расположение фона с помощью CSS свойства background-position

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

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

CSS3 дает нам возможность устанавливать сразу несколько фоновых изображений для одного элемента, для этого достаточно перечислить их через запятую и воспользоваться свойствами background-position и background-repeat, которые были описаны выше, для того, чтобы настроить их расположение

Задание разера фонового изображения в CSS

Для того, чтобы задать размер фонового изображения установленного с помощью свойства background-image, необходимо воспользоваться CSS свойством background-size и установить нужный размер изображения

Также, свойство background-size, может принимать значения:

  • contain. — Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
  • cover — Тоже самое, но масштабирует по наименьшей из сторон

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

fixed. — Изображение не прокручивается

local — Изображение прокручивается с контентом, но не с элементом, его содержащим

scroll — Изображение прокручивается с элементом, его содержащим

Использование градиента в качестве фонового изображения

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

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

  • CSS3 линейные градиенты (ссылка появится позже)
  • CSS3 радиальные градиенты (ссылка появится позже)
  1. Писать каждую пару свойств и его значение

Либо воспользоваться краткой записью

Как видите, второй способ займет у вас меньше места и сократит время его написания, да и браузер подгрузит такой код быстрее.

Превью Задание фона с помощью CSS свойства Background2015-11-22 2015-11-22 Задание фона с помощью CSS свойства Background Александр Сажин

Данный материал был вам полезен?

Не забудьте оставить свой комментарий, а также поблагодарить автора и поддержать его для создания новых полезных материалов

css свойство background

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

C помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, является заданием настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства, какое вы сможете увидеть ниже.

background-color &#8212; задает цвет фона. Можно применять к отдельным элементам (например div) или ко всему сайту через через тэг <body>:

/* черный фон сайта */
body < background-color: #000; >
/* черный фон заголовка, белый цвет шрифта */
h1

background-image &#8212; используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

Обратите внимание как указан путь к изображению &#8212; это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.
background-repeat &#8212; используемое в предыдущем примере изображение будет повторяется по всему экрану. Данное свойство (repeat) призвано управлять этим процессом. Имеется несколько допустимых значений:

  • background-repeat: repeat-x &#8212; изображение повторяется только по горизонтали
  • background-repeat: repeat-y &#8212; изображение повторяется только по вертикали
  • background-repeat: repeat &#8212; изображение повторяется по горизонтали и вертикали
  • background-repeat: no-repeat &#8212; изображение не повторяется

background-attachment &#8212; данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll &#8212; прокручивается вместе со страницей
  • background-attachment: fixed &#8212; при прокрутке фон остается неподвижным

background-position &#8212; задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: &#8212; top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
  • background-position: 20px 50px &#8212; изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% &#8212; расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom &#8212; рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

background: #fff url(&#171;my-image.jpg&#187;) no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

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

В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо указать цвет.

Например, определим красный цвет для фона элемента div:

В CSS есть несколько различных свойств, которые в качестве значения требует определенный цвет. Например, за установку цвета текста отвечает свойство color , за установку фона элемента — свойство background-color , а за установку цвета границы — border-color .

Существует несколько различных способов определения цвета текста.

Шестнадцатеричного значение . Оно состоит из отдельных частей, которые кодируют в шестнадцатеричной системе значения для красного, зеленого и синего цветов.

Например, #1C4463 . Здесь первые два символа 1C представляю значение красной компоненты цвета, далее 44 — значение зеленой компоненты цвета и 63 — значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице, образуется с помощью смешивания этих значений.

Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного. Например, #5522AA можно сократить до #52A , или, к примеру, #eeeeee можно сократить до #eee . При этом не столь важно, в каком регистре будут символы.

Значение RGB . Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов (Red — красный, Green — зеленый, Blue — синий). Значение каждого цвета кодируется тремя числами, которые могут представлять либо процентные соотношения (0–100%), либо число от 0 до 255.

Здесь каждый цвет имеет значение 100% . И в итоге при смешивании этих значений будет создаваться белый цвет. А при значениях в 0% будет генерироваться черный цвет:

Между 0 и 100% будут находиться все остальные оттенки.

Но, как правило, чаще применяются значения из диапазона от 0 до 255. Например,

Значение RGBA . Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности имеет значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например:

Значение HSL . HSL представляет аббривиатуру: Hue — тон, Saturation — насыщенность и Lightness — осветленность. HSL задает три значения. Первое значение Hue угол в круге оттенков — значение в градусах от 0 до 360. Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.

Второе значение — Saturation — представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность определяется в процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).

Третье значение — Lightness — определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый). Для получения чистого цвет применяется значение 50 %.

Данный цвет является эквивалентом значений #1C4463 и rgb(28, 68, 99)

Значение HSLA . Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный). Например:

Строковые значения . Существует ряд константных строковых значений, например, red (для красного цвета) или green (для зеленого цвета). К примеру,

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

Прозрачность

Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть специальное свойство, которое позволяет установить прозрачность элементов — свойство opacity . В качестве значения оно принимает число от 0 (полностью прозрачный) до 1 (не прозрачный):

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

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