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

С приходом CSS3 работа верстальщиков во многом стала проще и логичнее: ведь теперь можно действительно гибко настроить какой-либо объект, все реже прибегая к JavaScript. Допустим, вам надо настроить прозрачность фона — CSS тут же предлагает несколько вариантов.

image

Фон задается набором атрибутов (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), причем каждый из них можно прописать отдельно или же объединить под атрибутом background. Разберем каждый из них подробнее.

Атрибут background-color

В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

body {background-color: #cf0;}.

Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

body {background-color: purple;}.

Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

image

Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии. Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

Атрибут background-image

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

body {background-image: url(bg1.png), url(bg2.png)}.

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

Атрибут background-position

Если вы используете изображение, чтобы задать фон блока, CSS позволит вам расположить картинку в любом месте экрана. По умолчанию изображение располагается в левом верхнем углу. Атрибут принимает либо словесные указания (top, bottom, left, right), либо численные (проценты, пиксели и другие единицы измерения). При этом необходимо указать два значения: по горизонтали и по вертикали:

body {background-position: right center;} — в этом примере фон будет располагаться в правой части страницы, причем снизу и сверху расстояния до изображения одинаковы.

Атрибут background-size

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

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

Атрибут background-attachment

Этот атрибут задает поведение фонового изображения при прокрутке. Так, он может принимать 3 значения (не учитывая inherit, общего для всех представленных в этой статье атрибутов):

  • fixed — делает картинку на фоне неподвижной;
  • scroll — фон прокручивается вместе с остальными элементами;
  • local — изображение на фоне прокручивается, если прокрутку имеет содержимое. Фон, который выходит за рамки содержимого, фиксируется.

Пример использования:

body {background-attachment fixed}.

В настоящее время Firefox не поддерживает последнее свойство (local).

Атрибут background-origin

Этот атрибут отвечает за позиционирование элемента. Браузеры ранних версий требуют использования префиксов. Само свойство имеет три параметра:

  • padding-box позиционирует фон относительно края, при этом учитывая толщину рамки;
  • border-box отличается от предыдущего свойства тем, что линия границы может полностью или частично перекрывать фон;
  • content-box позиционирует изображение, прявязывая его к контенту.

Если задано несколько значений, то браузеры могут реагировать по-своему: Firefox и Opera воспринимают только первый вариант.

Атрибут background-repeat

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

  • no-repeat — изображение появляется на странице в единственном варианте;
  • repeat — фон повторяется по осям x и y;
  • repeat-x — только по горизонтали;
  • repeat-y — только по вертикали;
  • space — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
  • round — изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat} — аналогично background-repeat: repeat-y.

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

Атрибут background-clip

Этот атрибут определяет поведение фона под границами (например, в случае пунктирных рамок):

  • padding-box — фон отображается строго внутри блока;
  • border-box — изображение заходит под рамки;
  • content-box — картинка на фоне появляется только внутри содержимого.

Пример использования:

body {background-clip: content-box;}.

Chrom и Safari требуют использования префикса -webkit-.

Атрибуты opacity и filter

.block {background-image: url(img.png); opacity: .3;}.

Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:

.block {background-image: url(img.png); filter: alpha(opacity=30);}.

В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.

Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.

Видео «Как в CSS сделать прозрачный фон, фоновый цвет или картинку» посвящено вопросу о том, как на HTML странице сайта при помощи стилей CSS сделать прозрачный фон, поменять фоновый цвет или установить произвольную картинку, подключив файл с фоновым изображением. Каждый элемент на HTML странице сайта может иметь свой фон. По умолчанию он не установлен, т.е. все элементы имеют прозрачный фон, и только элемент body изначально отображается белым цветом. Цвет фона в CSS задается свойством background-color и распространяется на содержимое блока и на внутренние отступы. Для установки картинки в качестве фона, необходимо воспользоваться CSS свойством background-image и в качестве значения указать файл с фоновым изображением. Конечно, в некоторых случаях, картинку можно вставить в блок при помощи тега img. Но в этом случае изображение будет занимать определенное место, и Вы не сможете поместить туда текст или другой элемент. Т.е. для верстки сайта лучше использовать CSS, а для размещения статьи или другого контента лучше использовать вставку изображения при помощи тега img. Видео урок «Как в CSS сделать прозрачный фон, фоновый цвет или картинку» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 Бесплатные видео уроки, CSS, Веб дизайн

  • Автор: Евгений Попов
  • Длительность: 17:59
  • Дата: 06.05.2013
  • Смотрели: 77
  • Рейтинг: 0.0/0

Здравствуйте уважаемые начинающие веб-мастера

Мы уже научились создавать фоновые изображения.

Для создания эффекта прозрачности в CSS применяются:

1. Формат RGBA — создаёт прозрачный цвет.

Аббревиатура RGBA включает в себя три цвета

а. R — red (красный);

б. G — green (зелёный);

в. B — blue (синий);

г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.

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

color:rgba(120 40 200 0,4);.

2. Свойство CSS opacity — делает прозрачным любой элемент контента.

Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.

Записывается так:

opacity: 0.3;

Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.

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

Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.

Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.

И добавим в эту вьюгу, прекрасную представительницу холодного царства.

<!DOCTYPE html> <<span>html lang="ru"> <<span>head> <<span>meta charset="utf-8" /> <<span>title>Документ без названия<<span>/title> <<span>style> body{ background-image:url(images/i1.jpg); background-repeat:no-repeat; } img{ margin-left:290px; } <<span>/style> <<span>/head> <<span>body> <<span>img src="images/22.jpg"> <<span>/body> <<span>/html>

Как видно из результата, получилась какая то аппликация, а не картина.

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

Прозрачность для изображений создаётся свойством css opacity, и значения его принимаются от 0 до 1.

Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.

Давайте зададим картинке прозрачность равную 0.1

img{ margin-left:290px; opacity: 0.1; }

Результат:

Как видите, у вьюги проявилось лицо.

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

Для этого в html части кода, разместим тег p с текстом, а в таблице стилей, создадим селектор p, и зададим ему необходимые свойства.

<!DOCTYPE html> <<span>html lang="ru"> <<span>head> <<span>meta charset="utf-8" /> <<span>title>Документ без названия<<span>/title> <<span>style> body{ background-image:url(images/i1.jpg); background-repeat:no-repeat; } img{ margin-left:290px; opacity: 0.1; } p{ color:#efeae6; font-family: 'Impact'; margin:-60px 0 0 380px; opacity: 0.3; } <<span>/style> <<span>/head> <<span>body> <<<span>img src="images/22.jpg"> <<span>p>Ais<<span>/p> <<span>/body> <<span>/html>

Результат:

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

Давайте создадим блок с фоном, и напишем в нём прозрачный текст.

<!DOCTYPE html> <<span>html lang="ru"> <<span>head> <<span>meta charset="utf-8" /> <<span>title>Документ без названия<<span>/title> <<span>style> body{ background:#1b72ea; } p{ font-size:30px; color:rgba(249, 190, 81, 0.7); margin:100px 300px; } <<span>/style> <<span>/head> <<span>body> <<span>p>Прозрачный текст<<span>/p> <<span>/body> <<span>/html>

Результат:

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

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

Как сделать тень для текста, картинки, блока < < < В раздел > > > Как сделать блок с полосой прокрутки

А ну-ка, что там ещё интересного Как делается фоновый цвет; Градиент. Плавный переход от одного цвета к другому; Фоновые изображения;

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

На самом деле задача легко решается. Возьмем следующий код:

 Если мы хотим, чтобы div с классом fon стал прозрачным, при этом мы также желаем, чтобы другой элемент данное свойство не приобрел, мы просто добавляем еще один div, эквивалентный этому элементу. После действий код принимает вид: Далее в CSS пишем код, указывая необходимые свойства для прозрачности, к примеру: На этом эксперимент заканчивается, а мы получаем прозрачный фон и привычные элементы. Такой вариант применения прозрачности, пожалуй, наиболее удобный, поэтому пользуйтесь на здоровье!

Здравствуйте, уважаемые читатели блога 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»), но чаще всего используется именно шестнадцатеричный код:

color:#303

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

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

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

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

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

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

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

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

background-color:#FEFCDE

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

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

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

background-image:url(https://ktonanovenkogo.ru/image/comment_top_focus.gif);

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

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

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

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

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

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

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

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

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

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

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

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

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

background-image:url(https://ktonanovenkogo.ru/image/logo.png); background-repeat:no-repeat; background-position:400px 25px;

Т.е. значок счетчика Ливинтернет отстоит на 400 пикселов по горизонтали от левого края абзаца и на 25 пикселей по вертикали вниз от его верхнего края.

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

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

Позиция этой точки на ней теперь тоже определяется тем соотношением, которое задано в CSS правиле background-position (в нашем примере это 60 процентов от левой стороны и 40 процентов от верхнего края):

Проценты очень удобны для позиционирования, например, по центру (50% по осям X и Y) или правому краю (100% по оси X). Ведь размеры области элемента могут изменяться в зависимости от ширины области просмотра, а при использовании процентов будет изменяться и положение фонового изображения, чтобы всегда находиться либо по центру, либо по правому краю. Сделать это с помощью абсолютных единиц у вас не получится.

Можно использовать так же в background-position и комбинацию абсолютных и относительных единиц, как например, здесь:

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

background-image:url(https://ktonanovenkogo.ru/image/logo.png); background-repeat:no-repeat; background-position:100% 25px;

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

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

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

Причем, можно писать как «left top», так и «top left», ибо сути это не меняет:

  1. Left в комбинации означает ноль по оси абсцисс
  2. Right — 100% по оси абсцисс
  3. Top — ноль по оси ординат
  4. Bottom — 100% по оси ординат
  5. Center — 50% по обоим осям

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

Хотя слова в background-position и кажутся более понятными, но на практике проще и понятнее будет использовать цифры (абсолютные или относительные — не суть важно), ибо первая цифра это всегда X, а вторая — Y. Слова же могут стоять в разной последовательности.

Что примечательно, если в этом расчудесном CSS правиле написать только одно значение, то второе будет заменено по умолчанию на 50% (середина по вертикали).

Background-attachment и сборное CSS правило

Последнее правило, которое позволяет настраивать положение фонового изображения, называется background attachment. Используется оно не часто, но зато позволяет делать довольно эффектные вещи, на вроде неподвижного фона при прокрутке текста страницы.

Или же на вроде того, что делает плагин Simple Counters, когда показатели счетчика фоловеров в Твиттере и подписчиков по версии Feedburner остаются недвижимы на странице при ее прокрутке:

У этого правила имеется всего лишь два значения scroll (используется по умолчанию) и fixed:

В background attachment мы задаем точку отсчета координат, от которой в последствии отсчитывается отступ заданный в background position. При значении scroll за начало координат принимается левый верхний угол области Html элемента, для которого задается фоновое изображение.

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

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

background-image:url(https://ktonanovenkogo.ru/image/rss_no_drop1.png); background-repeat:no-repeat; background-position:50%; background-attachment:fixed;

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

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

Однако, если задать фиксированное положение фона для таких элементов как Body или же Html (т.е. в тегах, которые охватывают всю веб страницу), то данная картинка будет видна всегда в области просмотра и именно такое применение находит CSS свойство background-attachment в современной блочной верстке.

Есть еще сборное правило Background, которое позволяет объединить все пять описанных выше правил в одном флаконе. Причем, значения для всех пяти в сборном варианте можно будет использовать в любом порядке и в любом количестве (они уникальны и браузер их друг с другом не перепутает). Все, что вы не укажете в явном виде, браузер посчитает равным значению по умолчанию.

background:#FEFCDE url(https://ktonanovenkogo.ru/image/logo.png) no-repeat 50%;

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

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

background-color:#FEFCDE

написать:

background:#FEFCDE

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

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий