Background-position-x и background-position-y

⇐ ПредыдущаяСтр 12 из 36Следующая ⇒

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

background-position-x: right;

background-position-y: bottom;

Background-attachment

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

scroll фон прокручивается вместе с содержимым;

fixed закрепляет фоновое изображение;

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

inherit наследует значение родителя.

Начальное значение: scroll.

body { background-image: url(img/star.gif);

background-position: top;

bасkgrоund-repеаt: no-repеаt;

bасkgrоund-аttасhmеnt: fixеd; }

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

Background-size

Данное свойство позволяет масштабировать фоновое изображение. Принимаемые значения: ширина и высота через пробел; ключевое слово contain; ключевое слово cover. По умолчанию ширина и высота установлена как auto, что сохраняет исходные размеры изображения.

Пропорции могут искажаться. Например:

background-size: 100px 200pt;

background-size: 120% 30em;

Если применяются проценты, подразумеваются размеры элемента, а не изображения. В следующем примере если у контейнера ширина 600px, то размер фонового изображения уменьшится до 300× 300;

background-size: 50% auto;

Если указано единственное значение, оно считается шириной. Высота устанавливается как auto, и при этом пропорции сохраняются. Следующие значения аналогичны:

background-size: 200px;

background-size: 200px auto;

Данный код масштабирует изображение с 200× 200 до 100× 100 пикселов.

Использование значения contain свойства background-size масштабирует изображение таким образом, чтобы оно заполняло контейнер, изображение будет увеличиваться или уменьшаться пропорционально, ширина и высота не будут превышать размеры контейнера (см. рисунок 29).

Рисунок 29 – Использование значения background-size: contain

При использовании значения cover свойства background-size изображение будет масштабироваться так, чтобы заполнить весь контейнер, если пропорции элемента и картинки разные, то картинка будет обрезана, как это видно на рисунке 30.

Рисунок 30 – Использование значения background-size: cover

Background-origin

Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не работает, если значением background-attachment является fixed.

Принимаемые значения:

padding-box - фон позиционируется относительно края элемента, линия границы не будет перекрывать изображение (см. рисунок 31);

border-box - фон позиционируется относительно границы, при этом линия границы может заслонять изображение;

content-box- фон позиционируется относительно левого верхнего угла содержимого элемента.

Рисунок 31 – Использование значения background-origin: padding-box

Рисунок 32 – Использование значения background-origin: content-box

Background-clip

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

Принимаемые значения:

padding-box - фон отображается внутри элемента, не затрагивая границ (см. рисунок).

border-box - фон выводится под границами (см рисунок ).

content-box - фон отображается только внутри контента (см. рисунок).

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

Рисунок 33 – Использование значения background-clip: padding-box

Рисунок 34 – Использование значения background-clip: border-box

Рисунок 35 – Использование значения background-clip: content-box

Объединение свойств фона

В составе рекомендации CSS содержится объединенное свойство background, которое дает возможность указать все свойства фона в едином стилевом правиле. Можно указывать значения следующих свойств: bасkgrоund-color, bасkgrоund-image, bасkgrоund-repeat, bасkgrоund-origin, bасkgrоund-position, bасkgrоund-clip, background-size и background-attachment.

Пример:

body {background: url(superstar.gif) fixed top center no-repeat; }

div.intro {background: repeat-x url(topborder.gif) red; }

p {background: #336600; }

Значения разделяются пробелами и могут располагаться в любом порядке. Любое из значений можно пропустить (оставить по умолчанию).

Если имеется необходимость задать размер изображения свойством background-size, то он указывается через символ / (слэш) после указания позиции изображения свойством background-position, например:

background: 50px 30px/100px 300px no-repeat url(images/image1.jpg);

Здесь задано неповторяющееся фоновое изображение, расположенное с отступом по горизонтали 50px, по вертикали - 30px, размера 100 на 300 пикселей.

Замечание. 1.Обратите внимание, что размер изображения указывается только в паре с указанием начальной позиции, а при указании начальной позиции не обязательно указывать в паре размер изображения.

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

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

background: url(" sheep.png" ) 60% 90% no-repeat,

url(" sheep.png" ) 40% 50% no-repeat,

url(" sheep.png" ) 10% 20% no-repeat #393;

background-size: 240px 210px, auto, 150px;

Использование градиентов

Градиент - плавный переход между двумя или более указанными цветовыми оттенками, как это видно на рисунке 36.

Рисунок 36 – Градиентный переход цветов

Ранее для того, чтобы создать градиентную заливку, следовало использовать фоновые изображения. Теперь это можно сделать, используя CSS3: градиент генерируется браузером непосредственно под указанную область.

Градиент является не цветом, а фоновым изображением, создаваемым браузером, поэтому он используется как значение свойства background-image. Также градиент можно указывать везде, где можно вставлять фоновое изображение, например, в свойствах list-style-image и background.

ВCSS3 можно создать два типа градиентов:

· Линейный градиент (linear gradient) - плавный переход от цвета к цвету по прямой линии.

· Радиальный градиент (radial gradient) - плавный переход от цвета к цвету из одной точки по всем направлениям.

Линейный градиент создаётся с помощью функции linear-gradient(), которая принимает следующие аргументы:

· Градус угла или ключевые слова, определяющие угол направления линии градиента (необязательный аргумент).

· Список цветов, разделяемых запятыми, за каждым из которых может следовать стоп - позиция.

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

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

Рисунок 37 – Простейший градиентный переход цветов

Направление линии градиента может быть определено двумя способами:

1. Указание угла наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg:

Нулю градусов (или 360º ) соответствует градиент направления снизу вверх, далее отсчёт ведётся по часовой стрелке.

2. В качестве первого аргумента могут указываться ключевые слова to top, to right, to bottom или to left, которые соответствуют линиям градиентов 0deg, 90deg, 180deg, 270deg соответственно. Угол можно также задавать с помощью двух ключевых слов, например, to top right - линия градиента будет направлена в верхний правый угол.

После цвета можно указывать стоп - позицию для него, которая определяет положение цвета в градиентном переходе. Стоп - позиция указывается с помощью процентов или других единиц измерения CSS.

Например, запись red 0%, green 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на середине переходит в зеленый, а затем - до конца - в жёлтый. 0% и 100% можно не писать: эти значения подразумеваются по умолчанию.

Пример.

background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);

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

background-image: linear-gradient(to top, transparent, rgba(30, 87, 153, 0.8), rgba(30, 87, 153, 1), rgba(30, 87, 153, 1), rgba(41, 137, 216, 1), rgba(30, 87, 153, 1), rgba(30, 87, 153, 1), rgba(30, 87, 153, 0.8), transparent), url(images/image1.jpg);

Результат можно видеть на рисунке 38.

Рисунок 38 – Сочетание фонового изображения и градиента

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

Можно к одному элементу добавлять несколько фонов, а значит, и градиентов, перечисляя их параметры через запятую. Один из цветов должен быть полупрозрачным, иначе градиенты будут закрывать друг друга. На рисунке 39 показан результат применения двух градиентов, пересекающихся под прямым углом, что в сочетании с background-size создаёт клетки:

body { background: linear-gradient(transparent 50%, rgba(0, 186, 0, 0.2) 50%), linear-gradient(90deg, rgba(0, 186, 0, 0.2) 50%, transparent 50%);

background-size: 40px 40px; }

Рисунок 39 – Использование двух градиентов с полупрозрачными цветами

Радиальный градиент создаётся с помощью функции radial-gradient(). Он распространяется из центральной точки градиента во все стороны в форме круга (circle) или эллипса (ellipse). По умолчанию устанавливается эллиптический градиент, и его размер соответствует размеру элемента, к которому он применён.

Функция radial-gradient() может принимать следующие аргументы:

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

Список из двух или более цветов, за каждым из которых может следовать стоп - позиция.

Пример простейшего радиального градиента:

Форму радиального градиента можно определить с помощью ключевых слов circle или ellipse, указав одно из них в качестве первого аргумента:

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

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

Размер градиента можно определить с помощью одного из четырёх ключевых словосочетаний: closest-side, closest-corner, farthest-side, farthest-corner (см. таблицу 6) или указания значения радиуса с помощью единиц измерения CSS. Для указания радиуса проценты использовать нельзя.

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

Таблица 6 – Ключевые слова

для определения размера радиального градиента

Ключевые слова	Описание	Пример
closest-side	Размер градиента для круга зависит от расстояния между его центром и ближайшей к нему стороной элемента. А для эллипса - от расстояния между центром и двумя ближайшими к нему сторонами элемента.
closest-corner	Размер градиента зависит от расстояния между его центром и ближайшим к нему углом элемента.
farthest-side	Размер градиента для круга зависит от расстояния между его центром и самой дальней от него стороны элемента. А для эллипса - от расстояния между центром градиента и двумя самыми дальними от него сторонами.
farthest-corner	Размер градиента зависит от расстояния между его центром и самым дальним от него углом элемента. Это значение используется по умолчанию.

Пример.

#example1 {background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, yellow, indigo); }

#example2 {background-image: radial-gradient(circle closest-side, cyan, yellow, indigo); }

#example3 {background-image: radial-gradient( circle farthest-side at 200px, cyan 50%, yellow, indigo); }

#example4 {background-image: radial-gradient(circle farthest-corner at 175px, cyan, yellow, indigo); }

Блоковая модель

Рассмотрим важное для понимания размещения элементов на странице понятие блоковой модели элемента.

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

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

Как видим, в основе блока лежит его содержимое. Содержимое окружает определенный интервал, после чего идет граница, окруженная полями.

margin - пустое пространство (поле), которое отделяет один элемент от другого. Область внешнего отступа прозрачна и не имеет собственного цвета и другого оформления.

Рисунок 40 –Блоковая модель

border (рамка) - граница элемента. Рамка может быть установлена как со всех сторон элемента, так и с любой отдельной стороны.

padding (внутренний отступ) - расстояние между содержимым элемента и его рамкой.

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

Width и height

Свойства widthи height используются для указания размеров блочного элемента. Свойства width и height не работают для внутристрочных текстовых элементов. Иными словами, нельзя указывать ширину и высоту, например, элемента-анкера а или элемента strong, если только их отображение не изменено на блочное, например, с использованием свойства block, list-item или inline-block.

Принимаемые значения:

auto - область содержимого будет автоматически растянута по ширине на все свободное место.

величина в единицах длины - определяет размеры в единицах измерения CSS.

% - Ширина указывается в процентах от ширины области содержимого родительского элемента.

inherit – размеры наследуются от родительского элемента.

⇐ Предыдущая 7 8 9 10 111213 14 15 16 Следующая ⇒