Статьи

Упрощение и демистификация CSS-фонов

Март 21, 2018

Если вы разрабатывали сайты некоторое время, вы, вероятно, помните это: <body background = «bg.jpg»>. Я написал много таких сайтов до появления CSS, но когда я попытался вспомнить, как тогда работали фоны, мне, честно говоря, пришлось его искать — теперь он выглядит совершенно чуждым. Существует небольшая вероятность того, что вы все еще используете такой HTML-код (хотя по-прежнему существуют некоторые учебники старой школы ); но многие веб-дизайнеры никогда не занимали время, чтобы по-настоящему изучить и понять свойство background в CSS. В этой статье я собираюсь дать краткое изложение того, как эффективно использовать свойство background, и устранить все свойства background-position, background-color и другие избыточные свойства.

Фоновый обзор

Я не собираюсь тратить много времени на изучение того, что такое свойство фона и что делает, но я хочу кратко остановиться на нем. Если это не очевидно, свойство background контролирует фон. А если серьезно, в CSS свойства фона можно применять практически к любому элементу HTML; от тела страницы до абзаца. Используя свойство background, вы можете управлять цветом, местоположением, изображением и всеми другими характеристиками фона. Теперь давайте прыгнем в это.

Фоновые под-свойства

Свойство background имеет пять подчиненных свойств, которые могут функционировать независимо от «background». Вы, вероятно, знаете, что они делают, но если вам нужно освежить в памяти , вы можете перейти к объяснению W3School.com . Они есть:

  • фоновый цвет
  • изображение на заднем плане
  • фон-повторить
  • фон-вложение
  • фон положение

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

body{
    background-color: #000;
    background-image: url("bg.jpg");
    background-position: top center;
    background-repeat: repeat-x;
}

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

body{
    background: #000 url("bg.jpg") repeat-x top center;
}

Намного проще, правда?

Основы фона

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

body{
    background: url("bg.jpg") top center #000 repeat-x;
}

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

Это подлый фон-положение

Большинство свойств фона говорят сами за себя, поэтому я не буду тратить кучу времени на объяснение того, что такое background-color и background-image. С другой стороны, background-position стоит упомянуть. Фоновая позиция доставила мне много неприятностей в прошлом; и мне наконец-то пришлось просто сесть и возиться с этим, пока он не утонул.

Первое, что нужно помнить, это то, что когда вы используете свойство горизонтального смещения, вы всегда должны также указывать вертикальное смещение, и наоборот. Даже в ситуации, когда одно или другое имеет значение 0. Если вы не укажете и то и другое, произойдет что-то напуганное. Начните с горизонтальной (ось X), затем с вертикальной (ось Y). Горизонталь может быть шириной пикселя, процентом или спецификатором выравнивания (слева, по центру или справа). Вертикаль может быть шириной в пикселях или в процентах точно так же, как горизонтальная, но ее спецификациями выравнивания являются top, center и bottom. Так, например, если вы хотите разместить фоновое изображение в верхнем левом углу страницы, вы должны сделать это:

body{
    background: url("bg.jpg") no-repeat left top;
}

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

body{
    background: url("bg.jpg") no-repeat 20% 20px;
}

ВАЖНО: Хотя технически вы можете использовать «нижнюю» и проценты для вертикального положения изображения, они не будут работать в Firefox. Не используйте их.

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

Я надеюсь, что это убирает небольшой туман из свойства background. Я знаю, что это простые вещи, но простые вещи, как правило, мы терпим неудачу.

30
Share: