background-color в CSS


Содержание

background-color

Свойство CSS background-color используется для установки фонового цвета любого HTML-элемента. Обратите внимание, что background-color не наследуется по умолчанию. Дело в том, что фон HTML-элементов, в которых он не указан явно, прозрачный, поэтому сквозь него просвечивается фон родителя. Поэтому и создается ощущение наследования.

Вместо background-color можно использовать универсальное свойство background.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства background-color является указание цвета одним из следующих вариантов:

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
  • inherit — наследует значение background-color от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: transparent.

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

Синтаксис

Пример CSS: использование background-color

Результат. Использование свойства CSS background-color.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

Цвет и фон

В этой статье мы рассмотрим свойства CSS , связанные с цветом. Прочитав ее, вы узнаете:

  • как на веб-странице изменить цвет текста;
  • как добавить цвет или изображение для фона;
  • как добавить тени;
  • как изменять прозрачность.

Цвет текста

Вы наверняка уже знаете о свойстве, используемом для изменения цвета текста – это свойство color . Мы рассмотрим различные способы указания цвета.

Указание названия цвета

Самый простой и удобный способ указать цвет — это ввести его название. Единственным недостатком этого метода является то, что существует только шестнадцать так называемых « стандартных » цветов.

На приведенном ниже рисунке показано шестнадцать цветов, которые можно использовать, введя их название:

Шестнадцать названий цветов, которые можно использовать в CSS

Чтобы изменить цвет всех заголовков на коричневый, нужно ввести:

Заголовок отображается коричневым цветом

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28 . Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#) , за которым следует шесть букв или цифр от 0 до 9 и от A до F .

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения ( которые являются компонентами Red-Green-Blue в цвете ), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop , Gimp и Paint.NET , позволяют указывать цвета в шестнадцатеричном формате.

Вот, например, как можно применить белый цвет, указанный в шестнадцатеричном формате, к абзацам:

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33 .

Метод RGB

Red-Green-Blue , сокращенно обозначаемый как « RGB ». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

Это намного практичнее, и с помощью простой программы для рисования, такой как Paint , можно найти нужный цвет. Вот действия, которые необходимо выполнить:

  1. Зайдите в меню « Пуск », найдите в нем программу Paint и запустите ее.
  2. Перейдите в раздел « Редактировать цвета », как показано на рисунке, приведенном ниже.
  3. Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

розовым цветом. Выберите цвет в окне, как показано на рисунке, приведенном ниже.

  • Обратите внимание на соответствующие значения Red-Green-Blue , указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS .
  • Изменение цвета в Paint

    Выбор цвета в Paint

    Чтобы использовать метод RGB , нужно ввести rgb ( Red, Green, Blue ), заменив « Red, Green, Blue » соответствующими числами в диапазоне от 0 до 255 .

    Цвет фона

    Чтобы указать цвет фона html-страницы , используйте свойство CSS background-color. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB .


    Чтобы указать цвет фона для веб-страницы, необходимо работать с html-тегом

    Рассмотрите приведенный ниже код CSS :

    Результат работы этого кода простой html страницы с фоном:

    Белый текст на черном фоне

    CSS и наследование

    В CSS , если вы применяете стиль к тегу, все теги, которые находятся внутри него, будут иметь тот же стиль.

    Если я применил черный цвет фона и белый цвет текста к тегу

    , все заголовки и абзацы также будут иметь черный фон и белый текст… Это называется наследованием: теги, которые находятся внутри другого тега, « наследуют » его свойства.

    Это также отображено в названии « CSS », что переводится как « Каскадные таблицы стилей ». Свойства CSS наследуются в каскаде: если вы задаете стиль элементу, все его дочерние элементы будут иметь тот же стиль.

    Это означает, что весь текст моей веб-страницы обязательно будет белым?

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

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

    , и все заголовки и абзацы будут отображаться жирным шрифтом.

    Пример наследования с тегом

    Многие уверены, что они могут изменять только цвет фона html-страницы . Это не так: можно изменить фон любого элемента: заголовков, абзацев, определенных слов и т. д. В этом случае они будут выделены (как если бы они были отмечены маркером).

    Например, существует тег

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

    По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS :

    Красный цвет фона применяется к тексту тега

    . Действительно, даже если фон html-страницы черный, это свойство CSS для наиболее специфичного элемента имеет приоритет ( смотрите рисунок, приведенный ниже ):

    Красный выделенный текст на черном фоне

    Тот же принцип применим ко всем HTML-тегам и свойствам CSS . Если вы скажете:

    • Текст абзацев у меня отображается шрифтом с размером 1,2em ;
    • Важные тексты (

    ) у меня отображается шрифтом с размером 1,4 em .

    … то можете подумать, что возникнет конфликт. Если важный текст является частью абзаца, шрифтом какого размера он должен отображаться? 1,2 em или 1,4 em ? CSS решит, что наиболее специфичное объявление имеет приоритет: поскольку

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

    Фоновые изображения

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

    Как сделать изображение фоном страницы в html

    Свойство, используемое для указания фонового изображения ( в каком-то смысле его можно назвать тегом фона html-страницы ) — background-image . В качестве значения необходимо указать url(«nom_de_l_image.png») . Например:

    В результате мы получим:

    Фоновое изображение страницы

    Адрес, указывающий местоположение фонового изображения, может быть записан как абсолютный адрес ( http: // … ) или как относительный ( fond.png ).

    Будьте внимательны при указании относительных адресов в файле CSS . Адрес изображения должен быть указан относительно файла .css , а не относительно файла .html . Чтобы упростить ситуацию, советую размещать фоновое изображение в той же папке, что и файл .css .

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

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

    background-attachment: прикрепление фона

    Свойство CSS background-attachment используется для « закрепления » фона. Полученный эффект позволяет сделать так, чтобы фон « прокручивался » вместе с текстом. Доступны два значения:

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

    background-repeat: повторение фона

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

    • no-repeat : фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
    • repeat-x : изображение будет повторяться только в первой строке, горизонтально.
    • repeat-y : изображение будет повторяться только в первом столбце по вертикали.
    • repeat : фон будет повторяться в виде мозаики (значение по умолчанию).

    background-position: положение фона

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

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

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

    • top : вверху;
    • bottom : внизу;
    • left : слева;
    • center : по центру;
    • right : справа.

    Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

    Если я хочу отображать солнце в качестве фонового изображения ( следующий рисунок ), только один раз ( no-repeat ), всегда видимым ( fixed ) и расположенным в правом верхнем углу ( top right ), то следует написать следующий код фона html-страницы :


    Солнце в качестве фонового изображения в правом верхнем углу

    Сочетание свойств

    Если вы применяете к фону много свойств, то можно использовать своего рода « супер-свойство », называемое background . Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image , background -repeat , background-attachment и background-position .

    Таким образом, можно написать:

    Это первое « супер-свойство », которое я вам показываю, но будут и другие. Вы должны знать следующее:

    1. Порядок значений не важен. Можно комбинировать значения в любом порядке.
    2. Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

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

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

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

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

    Несколько фоновых изображений работают во всех браузерах кроме устаревших версий Internet Explorer , который распознает эту функцию, только начиная с версии 9 ( IE9 ).

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

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

    CSS позволяет легко изменять уровни прозрачности элементов. Для этого мы будем использовать свойство opacity и модель RGBa .

    Свойство opacity или как сделать фон страницы в html прозрачным

    Свойство opacity используется для указания уровня непрозрачности ( который является обратным для прозрачности ).

    • При значении 1 элемент будет полностью непрозрачным: это поведение по умолчанию.
    • При значении 0 элемент будет полностью прозрачным.

    Вам нужно выбрать значение от 0 до 1 . При значении 0,6 элемент будет на 60% непрозрачным, и вы сможете видеть сквозь него!

    Вот как это можно использовать:

    Вот пример, который даст представление о прозрачности.

    Прозрачный абзац

    Прозрачность работает во всех браузерах, включая Internet Explorer , начиная с версии IE9 и выше.

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

    Модель RGBa

    CSS3 предоставляет еще один способ изменения прозрачности: модель RGBa . Это RGB , которое мы рассматривали ранее, но с четвертым параметром: уровнем прозрачности ( альфа-каналом ). При значении 1 фон полностью непрозрачен. При значении менее 1 он становится прозрачным.

    Это обозначение распознают все современные браузеры, включая Internet Explorer ( начиная с версии IE9 и выше ). Для устаревших браузеров рекомендуется указывать стандартный код RGB , в дополнение к RGBa .

    Заключение

    Мы изменяем цвет текста с помощью свойства color , а цвет фона — с помощью background-color . Также его можно использовать как способ растянуть фон на всю html-страницу .

    Можно указать цвет, введя его имя ( например, black ), значение в шестнадцатеричном формате ( #FFC8D3 ) или указав код RGB ( rgb(250,25,118) ).

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

    Вы также можете сделать часть веб-страницы прозрачной с помощью свойства opacity или с помощью указания RGBa .

    Данная публикация представляет собой перевод статьи « Color and background » , подготовленной дружной командой проекта Интернет-технологии.ру

    CSS свойство background-color

    Определяет цвет фона элемента. Фоном элемента считается пространство общим размером самого элемента плюс его поля (свойство padding) и рамка (свойство border), но не отступы (свойство margin).

    CSS синтаксис

    Возможные значения

    Значение Описание
    цвет Устанавливает цвет фона (см. Как использовать цвета).
    transparent Значение по умолчанию. Устанавливает, что фон должен быть прозрачным.
    initial Устанавливает значение по умолчанию.
    inherit Значение наследуется от родительского элемента.

    Пример

    Устанавливаем фоновый цвет для различных элементов

    CSS background-color Property

    Example

    Set the background color for a page:

    More «Try it Yourself» examples below.

    Definition and Usage

    The background-color property sets the background color of an element.

    The background of an element is the total size of the element, including padding and border (but not the margin).

    Tip: Use a background color and a text color that makes the text easy to read.

    Default value: transparent
    Inherited: no
    Animatable: yes. Read about animatable Try it
    Version: CSS1
    JavaScript syntax: object.style.backgroundColor=»#00FF00″ Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Property
    background-color 1.0 4.0 1.0 1.0 3.5

    CSS Syntax


    Property Values

    Value Description Play it
    color Specifies the background color. Look at CSS Color Values for a complete list of possible color values. Play it »
    transparent Specifies that the background color should be transparent. This is default Play it »
    initial Sets this property to its default value. Read about initial Play it »
    inherit Inherits this property from its parent element. Read about inherit

    More Examples

    Example

    Specify the background color with a HEX value:

    Example

    Specify the background color with an RGB value:

    Example

    Specify the background color with an RGBA value:

    Example

    Specify the background color with a HSL value:

    Example

    Specify the background color with a HSLA value:

    Example

    Set background colors for different elements:

    body <
    background-color: #fefbd8;
    >

    h1 <
    background-color: #80ced6;
    >

    div <
    background-color: #d5f4e6;
    >

    span <
    background-color: #f18973;
    >

    COLOR PICKER

    HOW TO

    SHARE

    CERTIFICATES

    Your Suggestion:

    Thank You For Helping Us!

    Your message has been sent to W3Schools.

    Top Tutorials

    Top References

    Top Examples

    Web Certificates

    W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
    Powered by W3.CSS.

    Свойства background и color

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

    Основные свойства задания цвета и фона в CSS:

    Свойство color

    Это свойство задаёт цвет переднего плана элемента. То есть с помощью этого свойства можно изменить цвет текста, заголовков и т.д. Чтобы легче было понять как можно использовать данное свойство, предлагаю посмотреть пример:

    И в итоге вы должны получить следующее:

    Вот таким простым образом вы можете изменять цвета текста статей, а также отдельных элементов текста. Например вы можете задать цвет таким тегам как strong, b, em, i и т.д. Попробуйте поэкспериментировать с цветами, я уверен у вас всё получится.

    Свойство background-color в CSS

    Свойство background-color изменяет цвет фона какого-либо элемента или всего документа HTML. Например, чтобы изменить фон всей странички достаточно прописать это свойство для тега body. Единственное что от вас требуется так это понимание того, что вы хотите получить в итоге. Вот вам небольшой пример для тренировки:

    В результате у вас должно получиться следующее:

    Свойство background-image в CSS

    Благодаря этому свойству вы можете вставить какой-нибудь фоновый рисунок. Для этого нужно воспользоваться значением адреса фонового изображения url . То есть вам надо указать путь к файлу с изображением, причем изображение может находиться на другом сайте. Чтобы применить данное свойство достаточно в файле стилей прописать вот такой код:

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

    Свойство background-repeat в CSS

    Свойство background-repeat может принимать 4 разных значения:

    • Background-repeat: repeat-x ; повторение по горизонтали
    • Background-repeat: repeat-y ; повторение по вертикали
    • Background-repeat: repeat ; по вертикали и по горизонтали(значение по-умолчанию)
    • Background-repeat: no-repeat ; не повторяется

    В принципе здесь нет ничего сложного. Стоит заметить что в HTML аналогов этому свойству нет. Это очень удобное свойство. Например его можно использовать при создании меню или выделения какого-либо блока.Причем достаточно использовать небольшой файл изображения для создания нужного эффекта. Вот вам небольшой пример, показывающий повтор изображения по горизонтали:

    Результат у меня получился следующий:

    Свойство background-attachment в CSS

    Свойство background-attachment устанавливает будет ли прокручиваться фоновое изображение вместе с содержимом страницы или будет оставаться фиксированным. Для этого свойства есть всего два значения: scroll и fixed . Причём значение scroll стоит по умолчанию, поэтому это значение можно не использовать. Вот что означают данные значения:

    SCROLL — фоновое изображение прокручивается вместе с содержимым страницы;
    FIXED — фон строго зафиксирован на странице.


    В файле стилей это свойство записывается следующим образом:

    Свойство background-position в CSS

    Свойство background-position очень полезное. Оно позволяет определить положение для фонового изображения или задать его положение с помощью относительных и абсолютных единиц. Обычно указывают два значения из ключевых слов. Например:

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

    Я получил вот такой результат:

    Свойство background

    Свойство background используется для сокращенной записи всех свойств в одном свойстве. Порядок записи всех свойств в свойстве background таков: background-color_background-image_background-repeat_background-attachment _background-position. Все свойства записываются через пробел, причём если вы не указали какое-нибудь значение, то вместо него присваивается значение по умолчанию. Это свойство помогает намного сократить запись в таблице стилей. Например вместо этого:

    Можно (рекомендуется) записать так:

    Здесь нет ничего сложного. Я думаю немного попрактиковавшись вы быстро запомните данные свойства.Если вы что-то не запомнили не беда, ведь вы всегда можете вернуться назад к тому или иному уроку. В следующем уроке вы узнаете о свойствах шрифта в CSS

    Все права на сайт принадлежат Александру Побединскому.

    Копирование любых материалов сайта возможно только с разрешения автора или при указании ссылки на источник.

    Transparent CSS background color

    I want to make the list menu disappear by using opacity without affecting font. Is it possible with CSS3?

    8 Answers 8

    now you can use rgba in CSS properties like this:

    0.5 is the transparency, change the values according to your design.

    Keep these three options in mind (you want #3):

    1) Whole element is transparent:

    2) Whole element is somewhat transparent:

    3) Just the background of the element is transparent:

    yes, thats possible. just use the rgba-syntax for your background-color.

    In this case background-color:rgba(0,0,0,0.5); is the best way. For example: background-color:rgba(0,0,0,opacity option);

    Here is an example class using CSS named colors:

    This adds a background that is 25% opaque (colored) and 75% transparent.

    CAVEAT Unfortunately, opacity will affect then entire element it’s attached to.
    So if you have text in that element, it will set the text to 25% opacity too. :-(

    The way to get past this is to use the rgba or hsla methods to indicate transparency as part of your desired background «color». This allows you to specify the background transparency, independent from the transparency of the other items in your element.

    Here are 3 ways to set a blue background at 75% transparency, without affecting other elements:

    • background: rgba(0%, 0%, 100%, 0.75)
    • background: rgba(0, 0, 255, 0.75)
    • background: hsla(240, 100%, 50%, 0.75)

    lsreg’s IT blog

    Нередко требуется сделать фоновый цвет для какого-то элемента веб-страницы. Например, если необходимо выделить блок с важной информацией. За это отвечает свойство css «background-color». По умолчанию его значение выставлено на «transparent», что означает «прозрачный».

    Синтаксис свойства background-color

    Синтаксис очень прост. Сначала пишется свойство background-color, после чего ставится двоеточие и пишется цвет. То есть, синтаксис стандартный для множества подобных элементов.
    Предположим, у нас есть класс заголовков «attention». В таком случае, чтобы сделать все заголовки этого типа с красным фоном, необходимо написать такой код.

    Вместо цвета можно также указывать значения «transparent», чтобы сделать фон прозрачным и «inherit», чтобы взять то же значение, что и у родительского элемента.

    Цветовые модели

    Цвет в CSS можно задавать несколькими способами:

    1. Шестнадцатеричным числом. Самый популярный способ. Чтобы записать значение в шестнадцатеричной системе счисления необходимо к привычному числовому ряду 0-9 добавить пять первых латинских букв. Самое маленькое число – 0, а самое большое – f. Схема записи цвета в шестнадцатеричном формате: знак решетки #, степень выраженности красного (от 00 до ff), зеленого и синего цвета. Например, тот же красный цвет фона в шестнадцатеричном формате был бы записан как background-color: #FF0000.
    2. По цветовой модели RGB. В принципе, то же самое, что и прошлый вариант, просто запись несколько иная. Здесь также цвет получается путем смешивания красного, зеленого и синего цветов в определенных пропорциях (от 0 до 255). Но записывается он несколько по-иному: rgb(0, 255, 0); На первом месте в скобках находится красный, на втором – зеленый, а на третьем – синий цвет. В этом примере фон будет зеленым. Черный цвет обозначается нулями, а белый – цифрами 255.
    3. RGBA. То же RGB, но с альфа-каналом. Проще говоря, с эффектом прозрачности. Если интенсивность цвета колеблется в пределах от 0 до 255, то альфа-канал – от 0 до 1. Если записать свойство background-color: rgba(0, 255, 0,0), эффект будет аналогичный значению «transparent». Значение 1 аналогично такому же RGB, только без альфа-канала.
    4. HSL. Гибкая цветовая модель, которая включает не только тон, но и насыщенность с яркостью. Записывается он так же, как и RGB: hsl(165, 100%, 50%). Первое значение – это цветовой тон, обозначаемый в градусах. Второе – насыщенность, а третье – яркость.
    5. HSLA. То же, что и HSL, только с альфа-каналом.

    Также можно использовать стандартные цветовые обозначения: red, green, blue, yellow и другие.

    Пример кода, демонстрирующий разные цветовые модели

    Этот код окрашивает разные заголовки с различными id в соответствующие цвета. Содержимое каждого тега H1 указывает на способ представления цвета, которым создавался фон. В комментариях (текст между /* и */) описывается то, что делает каждый код.
    В результате получается такая страничка:

    Работа с цветом фона в библиотеке jQuery

    jQuery – популярная Javascript-библиотека. Может появиться ситуация, когда нужно поменять цвет фона после выполненных посетителем сайта действий. Для этого нужно воспользоваться методом .css(). В скобках нужно указать желаемое свойство, в нашем случае – background-color. Только писать нужно без дефиса – .css(‘backgroundColor’). В принципе, можно указывать свойство с ним, но это не так удобно, да и JS разработчику привычнее записывать его разным регистром.
    Второй параметр в скобках – значение свойства. Например, .css(‘backgroundColor’,’blue’).

    Использование свойства с разными элементами

    Свойство css background-color можно использовать с разными элементами веб-страницы. Надо его прописывать в селектор того объекта, фон которого необходимо определить. Как и любое другое свойство, его можно применять ко всем аналогичным элементам на странице (например, заголовкам), конкретному классу объектов (селектор .classname) или конкретному объекту (#id).
    Например, такой код присваивает красный фон строке таблицы.

    Чтобы применить css свойство к SVG-документу, необходимо прописать соответствующий тег в селекторе, а потом указать в фигурных скобках необходимое свойство. Принцип не отличается от CSS в HTML. Так, чтобы настроить цвет фона в SVG, необходимо прописать такой код.

    Также можно настроить цвет фона блочного элемента. Например, контейнера

    Анимация цвета фона

    Анимация цвета фона в css реализуется стандартно – через @keyframes, после чего в фигурных скобках указываются точки остановки. Например, можно сделать изменение цвета фона при наведении мышью на объект.
    Код будет следующий (пояснения приводятся в комментариях).

    Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

    Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

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

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

    • background-color — задает цвет фона для любого Html элемента;
    • background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
    • background-repeat — параметр повторения фоновой картинки;
    • background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
    • background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.


    Далее рассмотрим подробнее каждое свойство.

    Background-color и background-image

    Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

    Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

    background-color: transparent| |inherit

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

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

    У этого абзаца черный фон и белый текст

    Либо так в коде CSS файла:

    p <
    background-color:#000000;
    color:#ffffff
    >

    У этого абзаца черный фон и белый текст

    Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

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

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

    А вот оригинальный вид фонового изображения:

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

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

    Background-repeat — параметры повторения фонового изображения

    Свойство background-repeat может принимать следующие значения:

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

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

    В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

    repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

    repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

    repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

    Позиционирование фона с помощью background-position

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

    Горизонтальная позиция может принимать следующие значения:

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

    • left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
    • center — фоновое изображение располагается по центру элемента;
    • right — фон прижимается к правому краю элемента.

    Вертикальная позиция может иметь следующие значения:

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

    • top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
    • center — фоновое изображение располагается по центру;
    • bottom — фон прижимается к нижнему краю.

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

    Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

    background-image:url (//webcodius.ru/example/logo.png);
    background-repeat:no-repeat;
    background-position:250px 10px;

    Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

    То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:

    Вообще соотношение между ключевыми словами и процентной записью следующее:

    • top left = left top = 0% 0% (выравнивание по левому верхнему углу)
    • top = top center = center top = 50% 0% (вверху по центру)
    • right top = top right = 100% 0% (по правому верхнему углу)
    • left = left center = center left = 0% 50% (по левому краю и по центру)
    • center = center center = 50% 50% (по центру)
    • right = right center = center right = 100% 50% (по правому краю и по центру)
    • bottom left = left bottom = 0% 100% (по левому нижнему углу)
    • bottom = bottom center = center bottom = 50% 100% (внизу по центру)
    • bottom right = right bottom = 100% 100% (по правому нижнему углу)

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

    Фиксация фона background-attachment

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

    scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

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

    Сборное правило background


    Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

    Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:

    background: url (//webcodius.ru/example/logo.png) 50% no-repeat;

    А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

    Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

    Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы рассмотрим пять CSS правил, которые позволяют задать фон для любого элемента в Html — background-position (image, repeat, color, attachment). Ну, и про составное правило Background тоже не забудем упомянуть.

    Ничего сложно в этом нет, но есть определенные тонкости и нюансы, которые необходимо знать и учитывать при верстке или правке уже готового шаблона (помните про Фаербаг, который поможет открыть всю подноготную любого дизайна).

    Еще раз напомню, что данная статья входит в серию справочника и лучше всего будет начинать изучение стилевой разметки сначала, а именно со статьи про то, что такое CSS и с чем его едят, ну, а дальше следовать в порядке заданном в справочнике. Хотя, в любом случае решать вам, а сейчас давайте поговорим все же про задание фона.

    Color, background-color и background-image

    Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color. На самом деле тут все просто. Синтаксис совершенно обычный и цвет вы можете задавать в соответствии с тем, как это делали в языке гипертекстовой разметки. Как вы помните, цвета можно задавать с помощью шести цифр кода, поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).

    Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:

    Для примера я окрасил этот маленький абзац в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев (более темный), который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через color это довольно просто, а вот с фоном будет немного посложнее.

    Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное. Чтобы их увидеть, можете перейти на страницу текущей спецификации консорциума W3C и поискать там что-нибудь со словом Background:

      background color — с помощью этого правила задается цвет фона для любого Html элемента. В нем можно использовать либо код, либо название оттенка, т.е. все в точности так, как и было при использовании color.

    background image — с помощью него можно в качестве фона использовать картинку (но обязательно прочитайте про то, как уменьшить вес фотографии, ибо тяжелые картинки будут тормозить загрузку страниц), путь до которой будет указан в функционале url ().

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

  • background repeat — можно задать повторение картинки фона либо только по горизонтали в один ряд, либо только по вертикали, либо вообще запретить ее повторение.
  • background position — позволяет точно задать позицию этого изображения как в процентах, так и в абсолютных величинах
  • background attachment — позволяет выбрать тип привязки точки отсчета при позиционировании изображения для фона: либо относительно конкретного Html элемента, либо относительно области просмотра (видимой на экране компьютера области веб страницы).
  • Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью атрибута Style).

    Если вы заглянете в спецификацию, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах форм (select, input) он по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных тегов языка гипертекстовой разметки.

    Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):

    Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.

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

    Если вы посмотрите в спецификацию языка стилевой разметки, то увидите, что для background-image по умолчанию используется значение «none» (т.е. никакого изображения для фона не используется). Ну, а если это все-таки нужно, то в функционале url () вам потребуется указать до него путь:

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

    Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?

    Background-repeat — повтор фоновой картинки

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

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

    1. repeat — задает повтор картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле не нужно
    2. repeat-x — она будет повторяться только по горизонтали и получится в результате только одна строка с повторами. Не забудьте, что правило background-repeat не будет работать, если вы не задали в background-image путь до фоновой картинки:
    3. repeat-y — будет повторяться только по вертикали (получится один столбец из повторов):
    4. no-repeat — вообще не будет повторяться и мы получим одно единственное изображение в левом верхнем углу области того Html элемента, для которого оно используется:

    Background-position — позиционирование фона

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

    Посмотрев на спецификацию CSS становится ясно, почему фоновая картинка по умолчанию прижимается именно к верхнему левому краю области Html элемента. Потому что значение «0% 0%» является умолчательным для правила background position.

    Ну, а когда это правило в явном виде для элемента не задано (как в нашем случае), то браузер выбирает то его значение, которое принято в спецификации по умолчанию (замечу, что отчет осей координат в CSS ведется как раз от верхнего левого края области элемента).

    Так же из спецификации видно, что для позиционирования изображения фона с помощью background-position можно использовать как относительные (проценты), так и абсолютные величины (например, пиксели или другие единицы размеров применимые в CSS). Ну, а так же можно использовать слова, которые будут соответствовать определенным цифровым значениям. Но обо все по порядку.

    При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения:

    В чём разница между background и background-color?

    CSS свойство background – это просто сокращение, позволяющее одним значением установить сразу несколько из свойств background-* :

    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • background-attachment

    Указанные значения (в любом порядке) устанавливают свойства точно так же, как и отдельные инструкции. Не указанные сохраняют значения по умолчанию.

    Таким образом, background: #F90 полностью эквивалентен background-color: #F90

    Например, background: #F90 url(fon.jpg) repeat-x равен

    Цвета – разные цветовые модели бывают удобны для разных задач. Например, в модели HSL легко «гасить» свет, изменяя только его компоненту L (яркость), или только уменьшая насыщенность S. Или получить палитру из нескольких цветов, одинаково ярких-сочных, но равномерно разбросанных по кругу оттенков, равномерно раскидав их H по цветовому кругу, а S и L оставив одинаковыми.

    Разница огромная:
    background — это целый набор свойств:

    Вот эта куча лишнего кода пишется если вы используете просто background. В случае с background-color, просто применяется цвет.

    По аналогии с font, вы можете указывать так:

    А можете так:
    font: Arial 19px/15px;

    По поводу rgb, он полезен тем, если вам нужно задать цвет с прозрачностью. Это лучше чем делать opacity у блока.

    Илон Маск рекомендует:  Что такое код imagepscopyfont
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL