CSS Background - все, что вам нужно знать

является основной частью CSS. Они являются одной из основ, которые вам просто необходимо знать. В этой статье мы рассмотрим основы использования CSS-фонов, включая такие свойства, как background-attachment. Мы покажем некоторые общие приемы, которые можно сделать с фоном, а также то, что готовится для фонов в CSS 3 (включая четыре новых свойства фона!). У нас есть пять основных свойств фона для использования в CSS 2. Они следующие: background-color, background-image, background-position, background-repeat и background-attachment. Эти свойства могут быть объединены в одно сокращенное свойство: background. Важно отметить, что фон учитывает содержимое элемента, включая отступы и границы. Это не включает запас элемента. Это работает как должно в Firefox, Safari и Opera, а теперь и в IE8. Но в IE7 и IE6 фон не включает границу, как показано ниже.

Фон CSS - это одна из основ, которую вам просто необходимо знать. Мы рассмотрим основы использования CSS-фонов, включая такие свойства, как background-attachment. Мы покажем некоторые общие приемы, которые можно сделать с фоном, а также то, что хранится для фона в CSS 3 (включая четыре новых свойства фона!).

Вы также можете проверить следующие статьи журнала Smashing Magazine:

Работа с фоном в CSS 2

обзор

У нас есть пять основных фоновых свойств для использования в CSS 2. Они следующие:

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

Эти свойства могут быть объединены в одно сокращенное свойство: background. Важно отметить, что фон учитывает содержимое элемента, включая отступы и границы. Это не включает запас элемента. Это работает как должно в Firefox, Safari и Opera, а теперь и в IE8. Но в IE7 и IE6 фон не включает границу, как показано ниже.

Фон не распространяется на границы в IE7 и IE6.

Основные свойства

Цвет фона Свойство background-color заполняет фон сплошным цветом . Есть несколько способов указать цвет. Следующие команды имеют одинаковый вывод:

цвет фона: синий; цвет фона: rgb (0, 0, 255); цвет фона: # 0000ff;

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

Фоновое изображение Свойство background-image позволяет вам указать изображение для отображения в фоновом режиме. Это может использоваться в сочетании с background-color, поэтому, если ваше изображение не выложено мозаикой, тогда любое пространство, которое изображение не покрывает, будет установлено на цвет фона. Опять же, код очень прост. Просто помните, что путь относительно таблицы стилей. Итак, в следующем фрагменте изображение находится в том же каталоге, что и таблица стилей:

background-image: url (image.jpg);

Но если изображение находится в подпапке с именем images , то это будет:

background-image: url (images / image.jpg);

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

повторение фона: повторение; / * Значение по умолчанию. Будет мозаичное изображение в обоих направлениях. * / background-repeat: без повторов; / * Без черепицы. Изображение будет использовано только один раз. * / background-repeat: repeat-x; / * Плитка по горизонтали (т.е. вдоль оси x) * / background-repeat: repeat-y; / * Плитки по вертикали (то есть вдоль оси y) * / background-repeat: наследовать; / * Использует то же свойство background-repeat родительского элемента. * /

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

В приведенных ниже примерах мы установили фоновое изображение и используем свойство background-position для управления им. Мы также установили background-repeat для no-repeat. Все измерения в пикселях. Первая цифра - это положение оси x (по горизонтали), а вторая - это положение по оси y (по вертикали).

/ * Пример 1: по умолчанию. * / background-position: 0 0; / * т.е. верхний левый угол элемента. * / / * Пример 2: переместить изображение вправо. * / background-position: 75px 0; / * Пример 3: переместить изображение влево. * / background-position: -75px 0; / * Пример 4: переместить изображение вниз. * / background-position: 0 100px;

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

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

Ключевые слова говорят сами за себя. Для оси X:

А для оси у:

Их порядок точно такой же, как у значений пикселей, сначала значения оси x, а затем значения оси y следующим образом:

background-position: вверху справа;

Значения в процентах похожи. Здесь нужно помнить, что когда вы указываете процент, браузер устанавливает часть изображения на этот процент, чтобы выровнять его с процентом элемента. Это имеет больше смысла в примере. Допустим, вы указали следующее:

background-position: 100% 50%;

Это проходит 100% пути по всему изображению (т. Е. Очень правому краю) и 100% пути по элементу (помните, что отправной точкой всегда является верхний левый угол), и эти две линии находятся вверху. Затем он проходит 50% пути вниз по изображению и 50% пути вниз по элементу, чтобы выстроиться там. В результате изображение выровнено по правому краю элемента и точно посередине его.

Смайлик выровнен так, как если бы он был установлен по центру вправо.

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

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

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

Давайте посмотрим пример, чтобы прояснить это:

background-image: url (test-image.jpg); background-position: 0 0; повторение фона: без повтора; background-attachment: scroll;

Когда мы прокручиваем страницу вниз, фон прокручивается вверх, пока не исчезнет.

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

Давайте проиллюстрируем это на другом примере:

background-image: url (test-image.jpg); background-position: 0 100%; повторение фона: без повтора; background-attachment: исправлено;

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

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

background-image: url (test-image.jpg); background-position: 0 100%; повторение фона: без повтора; background-attachment: исправлено;

Часть изображения была обрезана, потому что она начинается снаружи элемента.

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

фон: <цвет> <изображение> <позиция> <вложение> <повтор>

Например, следующие правила ...

цвет фона: прозрачный; background-image: url (image.jpg); background-position: 50% 0; background-attachment: scroll; background-repeat: repeat-y;

… Можно объединить в одну строку:

фон: прозрачный URL (image.jpg) 50% 0 прокрутка repeat-y;

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

background: url (image.jpg) 50% 0 repeat-y;

Распространенное использование фонов

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

Искусственные колонны

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

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

Замена текста

Наш выбор шрифтов в Интернете очень ограничен. Мы могли бы получить пользовательские шрифты, используя такие инструменты, как SIFR , но они требуют, чтобы у пользователей был включен JavaScript. Более простое решение, которое работает в любом браузере, - это создать изображение текста с нужным шрифтом и использовать его вместо фона. Таким образом, текст по-прежнему отображается в разметке для поисковых систем и программ чтения с экрана, но браузеры покажут ваш предпочтительный шрифт.

Например, ваша HTML- разметка может выглядеть так:

<h3 class = "blogroll"> Blogroll </ h3>

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

h3.blogroll {ширина: 200 пикселей; высота: 75 пикселей; / * Так что элемент покажет все изображение. * / background: url (blogroll-text.jpg) 0 0 no-repeat; / * Устанавливает фоновое изображение * / text-indent: -9999px; / * Скрывает обычный текст, перемещая его на 9999 пикселей влево * /}

Легче Bullet Points

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

Здесь мы превращаем обычный неупорядоченный список в один с гладкими маркерами:

ul {list-style: none; / * Удаляет маркеры по умолчанию. * /} ul li {padding-left: 40px; / * Отступы элементов списка, оставляя место для фонового изображения слева. * / background: url (bulletpoint.jpg) 0 0 no-repeat; }

Фоны в CSS 3

CSS 3 имеет много изменений в магазине для фонов. Наиболее очевидным является вариант для нескольких фоновых изображений, но он также имеет четыре новых свойства, а также настройки для текущих свойств.

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

В CSS 3 вы сможете использовать более одного изображения для фона элемента. Код такой же, как в CSS 2, за исключением того, что вы разделяете изображения запятой . Первое объявленное изображение располагается в верхней части элемента, а последующие изображения «наслоены» под ним, например, так:

background-image: url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);

Новое свойство: фоновый клип

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

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

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

Новая собственность: происхождение происхождения

Это используется в сочетании с background-position. Вы можете получить положение фона, рассчитанное на основе полей границ, отступов или содержимого (например, background-clip).

• background-origin: border-box; background-position рассчитывается от границы.
• background-origin: padding-box; background-position вычисляется из поля отступов.
• background-origin: content-box; background-position рассчитывается по содержанию.

Хорошее объяснение различий между background-clip и background-origin доступно на CSS3.info ,

Новое свойство: Размер фона

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

• background-size: содержать; Уменьшает изображение до размера элемента (поддерживая пропорции пикселя).
• размер фона: обложка; расширяет изображение, чтобы заполнить элемент (поддерживая пропорции пикселя).
• размер фона: 100px 100px; масштабирует изображение до указанных размеров.
• размер фона: 50% 100%; масштабирует изображение до указанных размеров. Проценты по отношению к размеру вмещающего элемента.

Вы можете прочитать некоторые примеры особых случаев на Спецификации CSS 3 Веб-сайт.

Новое свойство: Background Break

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

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

• Background-break: непрерывный ;: значение по умолчанию. Относится к блокам так, как будто между ними нет пробелов (т. Е. Как будто они все в одном блоке, к которому применено фоновое изображение).
• Background-break: bounding-box ;: учитывает расстояние между полями.
• Background-break: each-box ;: обрабатывает каждый блок в элементе отдельно и заново рисует фон для каждого.

Изменения в цвете фона

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

Это делается путем добавления косой черты перед отступающим цветом, например, так

цвет фона: зеленый / синий;

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

Изменения фона повторяются

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

• пробел: равное количество пространства применяется между плитками изображения, пока они не заполняют элемент.
• round: изображение уменьшается до тех пор, пока плитки не поместятся в элемент.

Пример повторения фона: пробел; доступно на Спецификации CSS 3 Веб-сайт.

Изменения в фоновом приложении

У background-attachment появилось новое возможное значение: local. Это вступает в игру с элементами, которые могут прокручиваться (т.е. имеют переполнение: scroll;). Когда background-attachment установлен на прокрутку, фоновое изображение не будет прокручиваться при прокрутке содержимого элемента.

При использовании background-attachment: local now фон прокручивается при прокрутке содержимого элемента.

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

Если вы новичок в CSS, просто продолжайте практиковаться, и вы быстро освоите фон. Если вы опытный профессионал, я надеюсь, что вы ждете CSS 3 так же, как и я!