Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Основы CSS Background
Информация к новости
  • Просмотров: 329
  • Автор: hazardcd
  • Дата: 16-09-2016, 09:00
  • Не нравится
  • 0
  • Нравится
16-09-2016, 09:00

Основы CSS Background

Категория: Вебмастер / Оптимизация сайтов / Статьи

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

background-color

Наверняка вы уже неоднократно делали назначение цвета фона. Сделать это можно используя несколько видов записи: обычную (используется название цвета), шестнадцатиричную или RGB-запись. Каждый тип равнозначен, используйте какой больше нравится. Я стараюсь использовать наиболее короткий вариант, и восприятия попроще и файл стилей поменьше размером получается.

p {background-color: red;}
p {background-color: #f00;}
p {background-color: #ff0000;}
p {background-color: rgb(255, 0, 0;)}

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

p {background-color: rgba(255, 0, 0, 0.5);}

Последней цифрой установлена прозрачность в 50%. Можно установить значение прозрачности от 0 (полностью прозрачный фон) до 1 (полностью непрозрачный).

background-image

Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом всё, задача решена.

body {background-image: url("image1"), url("image2"), url("image3")}

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

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

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

background-repeat

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

Итак, подробнее:

  • no-repeat - Картинка не повторяется, все просто
  • repeat-x - Повторяется только по горизонтали
  • repeat-y - Только по вертикали
  • repeat - Как по горизонтали, так и по вертикали.
  • space - Все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются
  • round - Аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения

Возьмем пример из предыдущего раздела, с несколькими изображениями и применим заполнение:

body {
background-repeat: no-repeat, repeat-y, space;
}

Первое не будет повторяться, второе будет, но только по вертикали и третье заполнит всю доступную область.

background-attachment

Свойство определяет, как будет вести себя фон при изменении области просмотра. Самый яркий пример — будет ли он сдвигаться при прокрутке?

Может быть присвоено три значения:

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

background-position

Это одно из самых важных свойств. Определяет, где конкретно будет расположен фон. По умолчанию, он располагается в верхнем левом углу окна браузера. Можно устанавливать положение по горизонтали, вертикали или по обеим сторонам. В случае горизонтали это центр, слева и справа (center, left, right), вертикаль это центр, сверху и снизу (center, top, bottom). Также прекрасно распознаются значения в процентах или пикселах, например так:

body {
background-position: right 20px;
}

Эта запись означает, что фон будет располагаться справа и на 20px смещен вниз. Когда используется два значения — первое обозначает горизонтальное расположение, а второе — вертикальное. Когда только одно значение — второе по умолчанию будет в центре.

При процентной записи — отсчет идет из верхнего левого угла. Например, такая запись:

body {
background-position: bottom 10px right 20%;
}

переместит фон на 10px от нижнего края и на 20% от правого.

background-clip

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

Итак, три типа значения, на картинке наглядно видна разница:

  • padding-box - Фон будет отображаться без учета границы
  • border-box - Фон на весь размер блока
  • content-box - Фон без учета границы и отступа.

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

background-origin

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

background-size

Хотя фон может быть любого размера, вы можете контролировать его размер на своей странице, как горизонтальный, так и вертикальный.

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

body {
background-size: 500px 50%;
}

Если указано только одно значение — второе считается по умолчанию (auto или 100%, если это возможно).

Также, можно указать еще два значения, которые будут регулировать размер фонового изображения:

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

Сокращенная запись

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

body {
background-image: url("image.png");
background-position: top left;
background-size: 95% 95%;
background-repeat: no-repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: content-box;
background-color: #333};
}

Или краткий вариант записи:

body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}

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

Метки к статье: Background CSS

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *