background-size
Описание
Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
Синтаксис
Значения
Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
Визуализированный размер фонового изображения затем вычисляется следующим способом:
Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.
Формальный синтаксис
Примеры
Замечания
Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.
Фон и границы
| Необходимые умения: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS). |
|---|---|
| Цель: | Научиться стилизации фона и границ объектов. |
Стилизация фона в CSS
CSS-свойство background является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
Фоновый цвет
Поиграйте с ними, используя любое доступное значение .
Фоновое изображение
Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.
Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в приведённый выше пример, чтобы увидеть это в действии.
Свойство background-repeat
Свойство background-repeat используется для управления повторениями фонового изображения. Доступные значения:
Изменение размеров фонового изображения
Вы также можете использовать ключевые слова :
Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.
В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.
Позиционирование фонового изображения
Обычно свойство background-position задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.
Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице background-position ):
Допустимы значения длины и процентные:
Вы также можете смешивать значения ключевых слов с длинами или процентами, например:
Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.
Градиент в качестве фона
Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
Несколько фоновых изображений
Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми.
Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.
Другие свойства background- * также могут иметь значения, разделённые запятыми, как и background-image :
Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.
Закрепление фона
Использование сокращённого свойства background
При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.
При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:
Посетите страницу MDN свойства
, чтобы увидеть полное описание.
Доступность просмотра
Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.
Границы
Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.
Мы можем установить границу для всех четырёх сторон блока с помощью border :
Или мы можем нацеливаться на один край блока, например:
Индивидуальные свойства этих сокращений будут следующими:
Примечание : Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.
Закруглённые углы
Например, чтобы сделать все четыре угла блока радиусом 10px:
Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:
В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для border-radius чтобы увидеть доступные варианты синтаксиса.
Упражнение с границами и фоном
Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:
полупрозрачный чёрный цвет фона и сделайте текст белым.
Итоги
В этой теме мы рассмотрели довольно много, но как вы можете увидеть, возможностей по стилизации фона или границ блока намного больше. Изучите различные страницы свойств, если хотите узнать больше о каких-либо функциях, которые мы обсуждали. На каждой странице MDN есть много примеров использования свойств, с которыми вы можете поиграть и расширить свои знания.
В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?
Background-size: масштабирование фонового рисунка
Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.
Значения background-size
Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).
Ключевые слова
auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:
…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:
…то высота фоновой картинки будет вычисляться автоматически.
contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.
cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.
Числовые значения
Как мы уже сказали, размер фонового рисунка можно определять с помощью значений, указанных в пикселях, процентах и других единицах измерения CSS.
Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:
Учтите, что изображение может исказиться, если вы не попадете в его пропорции:
Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :
Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически
Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.
Поддержка браузерами
Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.
Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.
CSS background-size Свойство
Пример
Укажите размер фонового изображения с «Auto» и в пикселях:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
>
#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
>
Подробнее примеры ниже.
Определение и использование
Свойство background-size определяет размер фоновых изображений.
С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова («Auto», «Cover» и «содержит»), синтаксис с одним значением (устанавливает ширину изображения (высота становится «авто»), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: Height) и синтаксис нескольких фонов (разделенных запятой).
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.backgroundSize=»60px 120px» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Синтаксис CSS
Значения свойств
| Значение | Описание |
|---|---|
| auto | Значение по умолчанию. Фоновое изображение отображается в исходном размере |
| length | Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второй параметр имеет значение «Auto». Читать о единицах длины |
| percentage | Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе устанавливается в «Auto» |
| cover | Измените размер фонового изображения, чтобы охватить весь контейнер, даже если он должен растянуть изображение или вырезать немного от одного из краев |
| contain | Измените размер фонового изображения, чтобы убедиться, что изображение полностью отображается |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Укажите размер фонового изображения с процентами:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
>
#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
>
Пример
Укажите размер фонового изображения с помощью «Cover»:
Пример
Укажите размер фонового изображения с «содержать»:
Пример
Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с «содержать», а второй фон-изображение с «Cover»:
background-size
Пример
Укажите размер фонового изображения с «auto» и в пикселях:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
>
#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
>
Определение и использование
Свойство background-size определяет размер фоновых изображений.
Существует четыре различных синтаксиса, которые можно использовать с этим свойством: синтаксис ключевого слова («auto», «cover» и «contain»), синтаксис с одним значением (задает ширину изображения (высота становится «auto»), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: высота) и множественный синтаксис фона (разделенный запятой).
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Редактор кода |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.backgroundSize=»60px 120px» Редактор кода |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
CSS синтаксис
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| auto | Значение по умолчанию. Фоновое изображение отображается в исходном размере | Воспроизвести » |
| length | Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе имеет значение quot;auto». Прочитать Единицы длинЫ | Воспроизвести » |
| percentage | Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе имеет значение «auto» | Воспроизвести » |
| cover | Измените размер фонового изображения, чтобы покрыть весь контейнер, даже если он должен растянуть изображение или немного отрезать один из краев | Воспроизвести » |
| contain | Измените размер фонового изображения, чтобы убедиться, что изображение полностью видно | Воспроизвести » |
| initial | Задает этому свойству значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Укажите размер фонового изображения в процентах:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
>
#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
>
Пример
Укажите размер фонового изображения с помощью «cover»:
Пример
Укажите размер фонового изображения с помощью «contain»:
Пример
Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с «contain», и второе фоновое изображение с& quot;cover»:
