Css размер background image: background-size | htmlbook.ru

12.07.1970 Разное

Содержание

background-size | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.5+	3.0+	3.6+	2.1+	1.0+

Краткая информация

Версии CSS

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

<значение>: Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
<проценты>: Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto: Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain: Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>. ..</div>
 </body>
</html>

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.

масштабируем фон — учебник CSS

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

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:
```

background-size: auto auto;
```
…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:
```

background-size: 250px auto;
```
…то высота фоновой картинки будет вычисляться автоматически.
contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.
cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

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

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство

auto:

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Свойство background-size | CSS справочник

CSS свойства

Определение и применение

CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.

Поддержка браузерами

CSS синтаксис:

background-size:"auto | length | cover | contain | initial | inherit";

JavaScript синтаксис:

object.style.backgroundSize = "150px 150px"

Значения свойства

Значение	Описание
auto	Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length	Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
%	Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
cover	Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain	Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Масштабирование фоновых  изображений в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
  .test   {background-size : auto;}  /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */
.test2 {background-size : 100px 100px;}  /* задаем ширину и высоту фонового изображения */
.test3 {background-size : 70% 70%;}  /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size : cover;}  /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */
.test5 {background-size : contain;}  /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

Масштабирование фоновых изображений в CSS (свойство background-size).CSS свойства

CSS background-size | TuHub

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово (

cover или contain), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto. Например:

background-size: cover;       /* ключевое слово */
background-size: contain;     /* ключевое слово */
background-size: 100% 50%;    /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto;    /* не ключевое слово + плюс значение 'auto' */

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как auto.

Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).

Синтаксис свойства

Синтакис:

background-size: <bg-size> [ , <bg-size> ]*

/* где */

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

Значение по умолчанию: auto
Применяется: ко всем элементам
Наследуется: да
Анимируется: да, за исключением ключевых слов

Значения свойства

<length> — значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.
<percentage> — значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
contain — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
cover — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
auto — ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
- Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
- Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
- Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово contain.
- Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
- Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.

Поддержка браузерами

CSS3 Background-image options

Пример

Ниже вы увидите пример использования свойства background-size:

Подробно о свойстве CSS Background

Каждый элемент в DOM-дереве напоминает прямоугольник, который имеет фоновый слой, он может быть либо полностью прозрачным, либо цветным, либо содержать изображение. Этот фоновый слой находится под контролем 8 свойств CSS (плюс 1-го сокращённого свойства).

background-color

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

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

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

background-image

Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к изображению, определенному в url() нотации. Также может быть использовано значение none, которое будет учитываться в качестве слоя, но пустого.

.left { background-image: url(‘ire.png’); }
.right { background-image: none; }

Мы также можем указать несколько фоновых изображений, отделенных друг от друга запятой. Каждое последующее изображение будет помещается за предыдущим на Z-оси.

.middle {
background-image: url(‘khaled.png’), url(‘ire.png’);

/* Other styles */
background-repeat: no-repeat;
background-size: 100px;
}

background-repeat

Свойство background-repeat управляет тем как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).

Значение этого свойства может быть одним из следующих: repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }

.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

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

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

.left {
background-size: contain;
background-image: url(‘ire.png’);
background-repeat: no-repeat;
}
.right { background-size: cover; /*Остальные стили такие же как для класса as .left */ }

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

.left { background-size: 50px; /*Остальные стили такие же как для класса .left */ }
.right { background-size: 50% 80%; /*Остальные стили такие же как для класса .left */ }

background-attachment

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

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

.left {
background-attachment: fixed;
background-size: 50%;
background-image: url(‘ire.png’);
background-repeat: no-repeat;
overflow: scroll;
}
.middle { background-attachment: local; /* Остальные стили такие же как для класса .left */ }
.right { background-attachment: scroll; /*Остальные стили такие же как для класса .left */ }

background-position

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

Доступны следующие ключевые слова top, right, bottom, left, и center. Мы можем использовать эти ключевые слова в любой комбинации, и если указано только одно ключевое слово, то предполагается что другое равно center.

.top-left {
background-position: top;
background-size: 50%;
background-image: url(‘ire.png’);
background-repeat: no-repeat;
}
.top-middle { background-position: right; /*Остальные стили такие же как для класса .top-left */ }
.top-right { background-position: bottom; /*Остальные стили такие же как для класса .top-left */ }
.bottom-left { background-position: left; /*Остальные стили такие же как для класса .top-left */ }
.bottom-right { background-position: center; /*Остальные стили такие же как для класса .top-left */ }

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

.left { background-position: 20px 70px; /*Остальные стили такие же как для класса .top-left */ }
.right { background-position: 50%; /*Остальные стили такие же как для класса .top-left */ }

background-origin

Свойство background-origin определяет область позиционирования фонового изображения.

Доступные значения следующие: border-box — фон позиционируется относительно границы, при этом линия границы может перекрывать изображение, padding-box — фон позиционируется относительно края элемента с учетом толщины границы, и content-box — фон позиционируется относительно содержимого элемента.

.left {
background-origin: border-box;
background-size: 50%;
background-image: url(‘ire.png’);
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}
.middle { background-origin: padding-box; /*Остальные стили такие же как для класса .left*/ }
.right { background-origin: content-box; /*Остальные стили такие же как для класса .left*/ }

background-clip

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

.left{
background-clip: border-box;
background-size: 50%;
background-color: #ffdb3a;
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}
.middle { background-clip: padding-box; /*Остальные стили такие же как для класса .left*/ }
.right { background-clip: content-box; /*Остальные стили такие же как для класса .left*/ }

background

И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.

Перевод статьи с https://bitsofco.de/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

background-size — Дока

Кратко 🔗

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

Пример 🔗

Создадим блок и в качестве фона зададим ему красивую панораму:

HTML

<div></div>

CSS

.element {
height: 100vh;
background-color: #f1f1f1;
background-image: url("landscape.jpg");
background-repeat: no-repeat;
}

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

Укажем свойство background-size со значением 100% 100%. По логике с таким значением фон должен занимать 100% высоты элемента и 100% ширины элемента.

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

Есть способ заставить картинку занять всю доступную площадь и при этом не деформироваться. Зададим background-size: cover — cover переводится с английского как обложка.

В этой версии добавлено ещё свойство background-position со значением center чтобы в области видимости был центр изображения.

Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто отрезается. Именно значение cover используется чаще всего для создания красивых фонов.

Как это понять 🔗

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

Свойство background-size управляет размерами картинки внутри элемента, для которого эта картинка задана фоном.

Как пишется 🔗

В качестве значения для свойства background-size можно задавать:

Точный размер в любых единицах измерения, доступных в вебе.
Проценты. Размер в процентах будет рассчитываться от размеров элемента.
Ключевое слово auto. Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию.
Ключевое слово cover. Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается.
Ключевое слово contain. Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.

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

Ключевое слово auto в случае комбинации позволяет сохранять пропорции изображения.

Подсказки 🔗

💡 Значение по умолчанию auto

💡 Значение свойства не наследуется

💡 Чаще всего используется значение cover. Второе по популярности значение — contain. Также часто можно увидеть значение 100% 100%, но с ним следует быть аккуратным. Точные размеры фона указываются крайне редко. Не принято оставлять значение по умолчанию.

💡 Свойство размера фона можно анимировать при помощи свойства transition 🥳

В работе 🔗

Алёна, @ABatickaya

🛠 Если для задания фона используется шорткат background, то значение для background-size указывается последним, после слэша /. Пример: background: url('example.jpg') no-repeat center / **cover**

🛠 Свойство background-size очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном.

HTML

<div></div>

CSS

.element {
height: 100vh;
background-color: #f1f1f1; 
background-image: url("pattern.svg");
background-size: 40px auto; 
}

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

Автор: Алёна, @ABatickaya

Обратная связь

✅ Спасибо за ваше мнение!

🛑 Что-то пошло не так и данные не отправились. Нам очень важно знать ваше мнение, пришлите его на почту [email protected]

Размеры в SVG • Про CSS

Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

Спецификация.

Вьюпорт

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

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

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

Ширина и высота

Шириной и высотой элемента можно управлять стандартными свойствами width и height:

<svg>
  ...
</svg>

Их можно задавать как атрибутами, так и в CSS:

.mysvg {
  width: 350px;
  height: 200px;
}

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

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

viewBox

Похожим образом не изменяя размеры содержимого ресайзится iframe, но в случае с SVG это поведение можно изменить, если определить размеры области с помощью свойства viewBox:

<svg
    viewBox="0 0 180 180">
  ...
</svg>

Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.

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

viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:

Это очень простое демо, вот пример посложнее от Sarah Drasner.

Интересно, что если у SVG нет размеров, но задан viewBox, изображение займёт собой всё доступное пространство:

<svg viewBox="0 0 180 180">
  ...
</svg>

Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.

preserveAspectRatio

Как мы видели в примере выше, если у SVG заданы размеры и viewBox, содержимое будет сжиматься и растягиваться с сохранением пропорций, чтобы поместиться целиком, но этим поведением тоже можно управлять — с помощью свойства preserveAspectRatio (оно задаётся только атрибутом).

Например, с помощью значения none можно указать, что сохранять пропорции не нужно:

<svg
    viewBox="0 0 180 180"
    preserveAspectRatio="none"
    >
  ...
</svg>

SVG с viewBox и preserveAspectRatio='none' ведёт себя очень похоже на img: при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

none будет полезно для резиновых фонов:

Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: xMaxYMin. Для обеих осей можно задать положение в начале, в середине и в конце:

xMin, YMin — в начале оси xMid, YMid — в середине xMax, YMax — в конце

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

Поведение элемента определяется второй частью preserveAspectRatio. Возможные значения:

meet — содержимое стремится уместиться целиком (как фон с background-size: contain) slice — содержимое заполняет собой всю область видимости (как background-size: cover: что не поместилось, обрежется)

Важно помнить, что preserveAspectRatio не работает без viewBox. viewBox задает область, которая должна масштабироваться, preserveAspectRatio определяет как именно она должна это делать.

Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).

Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.

Единицы измерения

Внутри SVG можно использовать em, ex, px, pt, pc, cm, mm, in, проценты, а также единицы системы координат (user space units). Единицы системы координат соответствуют пикселям, поэтому для значений в пикселях единицы измерения указывать не нужно.

Системы координат

В SVG-документе есть две системы координат:

Система координат области отрисовки — viewport space.
Система координат содержимого — user space.

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

По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства vector-effect со значением non-scaling-stroke, оно добавляется к содержимому SVG:

<circle r="60" cx="75" cy="75"
  stroke="black" stroke-width="1"
  vector-effect="non-scaling-stroke"/>

vector-effect можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

Изменение размера фоновых изображений с помощью background-size — CSS: каскадные таблицы стилей

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

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808. Мы хотим (по какой-то причине, которая, вероятно, связана с ужасно плохим дизайном сайта) мозаику из четырех копий этого изображения в элемент размером 300×300 пикселей.Для этого мы можем использовать фиксированное значение background-size , равное 150 пикселям.

HTML

CSS

  .tiledBackground {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}

Результат

Вы также можете указать как горизонтальный, так и вертикальный размер изображения, например:

  размер фона: 300 пикселей 150 пикселей;

Результат выглядит так:

На другом конце спектра вы можете увеличить изображение на заднем плане.Здесь мы масштабируем значок 32×32 пикселей до 300×300 пикселей:

  .square2 {
  фоновое изображение: URL (favicon.png);
  размер фона: 300 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  тень текста: белый 0px 0px 2px;
  размер шрифта: 16 пикселей;
}

Как видите, CSS фактически идентичен, сохраните имя файла изображения.

Помимо значений , свойство CSS background-size предлагает два специальных значения размера: содержит и cover .Давайте посмотрим на них.

содержат

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

HTML

  
   Попробуйте изменить размер этого элемента!

CSS

 .bgSizeContain {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: содержать;
  ширина: 160 пикселей;
  высота: 160 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
  изменить размер: оба;
  переполнение: прокрутка;
}

Результат

cover

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

HTML

  
   Попробуйте изменить размер этого элемента!

CSS

  .bgSizeCover {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: обложка;
  ширина: 160 пикселей;
  высота: 160 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
  изменить размер: оба;
  переполнение: прокрутка;
}

Результат

размер фона — CSS: каскадные таблицы стилей

Свойство CSS background-size устанавливает размер фонового изображения элемента.Изображение можно оставить в его естественном размере, растянуть или ограничить, чтобы оно соответствовало доступному пространству.

Пространства, не покрытые фоновым изображением, заполняются свойством background-color , и цвет фона будет виден за фоновыми изображениями, имеющими прозрачность / полупрозрачность.

 
размер фона: обложка;
размер фона: содержать;



размер фона: 50%;
размер фона: 3.2em;
размер фона: 12 пикселей;
размер фона: авто;



размер фона: 50% авто;
размер фона: 3em 25%;
размер фона: авто 6 пикселей;
размер фона: авто авто;


размер фона: авто, авто;
размер фона: 50%, 25%, 25%;
размер фона: 6 пикселей, авто, содержать;


размер фона: наследовать;
размер фона: начальный;
размер фона: вернуться;
размер фона: не задано;

Свойство background-size задается одним из следующих способов:

Использование значений ключевого слова содержит или покрытие .
Используется только значение ширины, в этом случае высота по умолчанию авто .
Использование значения ширины и высоты, и в этом случае первое устанавливает ширину, а второе — высоту. Каждое значение может быть <длина> , <процент> или авто .

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

Значения

содержат: Максимально масштабирует изображение в пределах контейнера без обрезки или растяжения изображения.Если контейнер больше, чем изображение, это приведет к мозаике изображения, если для свойства background-repeat не установлено значение no-repeat .
крышка: Масштабирует изображение как можно больше, чтобы заполнить контейнер, при необходимости растягивая изображение. Если пропорции изображения отличаются от элемента, оно обрезается либо по вертикали, либо по горизонтали, чтобы не оставалось пустого места.
авто: Масштабирует фоновое изображение в соответствующем направлении с сохранением его внутренних пропорций.
<длина>: Растягивает изображение в соответствующем размере до указанной длины. Отрицательные значения не допускаются.
<процент>: Растягивает изображение в соответствующем измерении до указанного процента от области позиционирования фона . Область позиционирования фона определяется значением background-origin (по умолчанию поле заполнения). Однако, если для фона значение background-attachment равно fixed , то область позиционирования — это все окно просмотра.Отрицательные значения не допускаются.

Внутренние размеры и пропорции

Вычисление значений зависит от внутренних размеров изображения (ширина и высота) и внутренних пропорций (отношение ширины к высоте). Эти атрибуты следующие:

Растровое изображение (например, JPG) всегда имеет внутренние размеры и пропорции.
Векторное изображение (например, SVG) не обязательно имеет внутренние размеры. Если он имеет как горизонтальные, так и вертикальные внутренние размеры, он также имеет внутренние пропорции.Если у него нет размеров или только одно измерение, оно может иметь или не иметь пропорций.
CSS <градиент> s не имеют внутренних размеров или внутренних пропорций.
Фоновые изображения, созданные с помощью функции element () , используют внутренние размеры и пропорции генерирующего элемента.

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

На основе внутренних размеров и пропорций визуализированный размер фонового изображения вычисляется следующим образом:

Если указаны оба компонента background-size , а не auto : Фоновое изображение визуализируется с указанным размером.
Если размер фона равен содержит или обложку : При сохранении внутренних пропорций изображение отображается с наибольшим размером, содержащимся в области позиционирования фона или покрывающей ее.Если изображение не имеет внутренних пропорций, оно отображается с размером области позиционирования фона.
Если размер фона равен авто или авто авто :
- Если изображение имеет как горизонтальные, так и вертикальные внутренние размеры, оно отображается с этим размером.
- Если изображение не имеет внутренних размеров и внутренних пропорций, оно отображается с размером области позиционирования фона.
- Если изображение не имеет внутренних размеров, но имеет внутренние пропорции, оно отображается так, как если бы вместо этого было указано , содержащее .
- Если изображение имеет только одно внутреннее измерение и внутренние пропорции, оно отображается с размером, соответствующим этому одному измерению. Другое измерение вычисляется с использованием указанного размера и внутренних пропорций.
- Если изображение имеет только одно внутреннее измерение, но не имеет внутренних пропорций, оно отображается с использованием указанного размера и другого измерения области позиционирования фона.
Примечание. изображений SVG имеют атрибут preserveAspectRatio , который по умолчанию эквивалентен , содержит ; явный background-size заставляет игнорировать preserveAspectRatio .
Если background-size имеет один компонент auto и один компонент не auto :
- Если изображение имеет внутренние пропорции, оно растягивается до указанного размера.Неуказанный размер вычисляется с использованием указанного размера и внутренних пропорций.
- Если изображение не имеет внутренних пропорций, оно растягивается до указанного размера. Неуказанный размер вычисляется с использованием соответствующего внутреннего размера изображения, если таковой имеется. Если такого внутреннего размера нет, он становится соответствующим размером области позиционирования фона.

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

Работа с градиентами

Если вы используете в качестве фона и задаете background-size , чтобы использовать его, лучше не указывать размер, который использует один компонент auto или задан используя только значение ширины (например, background-size: 50% ). Рендеринг <градиент> с в таких случаях изменен в Firefox 8 и в настоящее время обычно несовместим между браузерами, которые не все реализуют рендеринг в полном соответствии со спецификацией CSS3 background-size и градиентом CSS3 Image Values. Спецификация.

  .gradient-example {
  ширина: 50 пикселей;
  высота: 100 пикселей;
  фоновое изображение: линейный градиент (синий, красный);

  
  размер фона: 25 пикселей;
  размер фона: 50%;
  размер фона: авто 50 пикселей;
  размер фона: авто 50%;

  
  размер фона: 25 пикселей 50 пикселей;
  размер фона: 50% 50%;
}

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

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

Мозаика большого изображения

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808.Мы хотим разделить четыре копии этого изображения на элемент размером 300×300 пикселей. Для этого мы можем использовать фиксированное значение background-size , равное 150 пикселям.

HTML

CSS

  .tiledBackground {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}

Результат

Дополнительные примеры см. В разделе «Масштабирование фоновых изображений».

Таблицы BCD загружаются только в браузере

Растягивать и масштабировать изображение CSS в фоновом режиме — только с CSS

Я согласен с изображением в абсолютном div со 100% шириной и высотой. Убедитесь, что вы установили 100% ширину и высоту для тела в CSS и установили поля и отступы равными нулю. Другая проблема, с которой вы столкнетесь с этим методом, заключается в том, что при выделении текста область выбора может иногда включать фоновое изображение, что приводит к неудачному эффекту, когда вся страница имеет выбранное состояние.Вы можете обойти это, используя правило CSS user-select: none , например:

  
    
        
    
    
        
            содержание здесь

Опять же, Internet Explorer — плохой парень, потому что он не распознает параметр выбора пользователя — его не поддерживает даже предварительная версия Internet Explorer 10, поэтому у вас есть возможность либо использовать JavaScript для предотвращения выбора фонового изображения (например, http://www.felgall.com/jstip35.htm) или используя метод CSS 3 background-stretch.

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

Установить размер фонового изображения с помощью CSS?

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

Если вы используете тег img, вы можете изменить размер, но это не даст вам желаемого результата, если вам нужно, чтобы изображение было фоном для какого-то другого контента (и оно не будет повторяться, как вам кажется).

Это возможно сделать в CSS3 с размером фона .

Все современные браузеры поддерживают это, поэтому, если вам не нужно поддерживать старые браузеры, это способ сделать это.
_{Поддерживаемые браузеры:}
^{Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) и Chrome 3.0+.}

  .stretch {
/ * Растянется до указанной ширины / высоты * /
  размер фона: 200 пикселей 150 пикселей;
}
.stretch-content {
/ * Растянется до ширины / высоты элемента * /
  размер фона: 100% 100%;
}

.resize-width {
/ * ширина: 150 пикселей, высота: автоматически, чтобы сохранить соотношение сторон * /
  размер фона: 150 пикселей Авто;
}
.resize-height {
/ * высота: 150 пикселей, ширина: автоматически, чтобы сохранить соотношение сторон * /
  размер фона: Авто 150 пикселей;
}
.resize-fill-and-clip {
  / * Изменить размер для заполнения и сохранить соотношение сторон.
     Вызовет обрезку, если соотношение сторон окна отличается от изображения. * /
  размер фона: обложка;
}
.resize-best-fit {
/ * Измените размер до максимального соответствия и сохраните соотношение сторон.
   Будет вызывать разрыв, если соотношение сторон окна отличается от изображения. * /
  размер фона: содержать;
}

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

Круглый

Вы также можете использовать background-size: round , которые имеют значение в сочетании с repeat:

  .resize-best-fit-in-repeat {
/ * Изменение размера для максимального соответствия целое количество раз по оси x * /
  размер фона: круглый авто; / * Высота: автоматически сохраняет соотношение сторон * /
  фон-повтор: повторять;
}

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

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

Как изменить размер фоновых изображений с помощью CSS3

В CSS2.1 фоновые изображения, примененные к контейнеру, сохранили свои фиксированные размеры. К счастью, CSS3 вводит свойство background-size , которое позволяет растягивать или сжимать фон. Он идеально подходит, если вы создаете шаблон с помощью методов адаптивного веб-дизайна.

Есть несколько способов определить размеры размеров — просмотреть демонстрационную страницу CSS3 background-size .

Абсолютное изменение размера

Измерения длины можно применить с помощью:

  размер фона: ширина высота;

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

Мы можем изменить размер изображения до нового размера, используя абсолютные измерения, такие как px, em, cm и т. Д.При необходимости соотношение сторон будет изменено, поэтому, если наше фоновое изображение имеет размер 200 × 200 пикселей, следующий код сохраняет эту высоту, но уменьшает ширину вдвое:

  размер фона: 100 пикселей 200 пикселей;

Если определена только одна длина, предполагается, что это ширина. Для высоты установлено значение , авто , и изображение сохранит свое соотношение сторон, то есть

  размер фона: 100 пикселей;

размер фона: 100 пикселей автоматически;

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

Относительное изменение размера с использованием процентов

Если используется процент, размер основан на содержащем элементе — НЕ размер изображения, например

  размер фона: 50% авто;

Таким образом, ширина фонового изображения зависит от размера его контейнера. Если ширина нашего контейнера составляет 500 пикселей, размер нашего изображения изменяется до 250 × 250.

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

Масштабирование до максимального размера

Свойство background-size также принимает ключевое слово contain . Это масштабирует изображение по размеру контейнера. Другими словами, изображение будет пропорционально увеличиваться или уменьшаться, но ширина и высота не будут превышать размеры контейнера:

  размер фона: содержать;

Заполнение фона

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

  размер фона: обложка;

Размер нескольких фонов

Можно изменить размер нескольких фонов с помощью списка значений, разделенных запятыми, которые применяются в том же порядке, например

  фон:
url ("Sheep.png") 60% 90% без повтора,
url ("Sheep.png") 40% 50% без повтора,
url ("Sheep.png") 10% 20% no-repeat # 393;
размер фона: 240 пикселей 210 пикселей, авто, 150 пикселей;

Совместимость с браузером

Последние версии всех браузеров поддерживают фонового размера без префикса.

IE8 и ниже не поддерживают свойство. Вы можете использовать фильтр IE для имитации содержания и покрытия, но невозможно изменить размер фоновых изображений, не прибегая к уловкам, таким как использование реальных img за другими элементами. Это грязно; Я рекомендую изящную деградацию.

Сокращенное обозначение

В спецификации W3C CSS Backgrounds and Borders Module Level 3 указано, что background-size может быть определен после background-position в сокращенной нотации background .Ни один из браузеров не поддерживает эту опцию, поэтому на данный момент background-size необходимо определить как отдельное свойство.

Просмотр демонстрационной страницы размера фона CSS3…

Поднимите свои навыки CSS на новый уровень с помощью нашей книги «Мастер CSS, 2-е издание» Тиффани Б. Браун, в которой рассматриваются CSS-анимации, переходы, преобразования и многое другое.

Установить размер фонового изображения с помощью CSS?

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

Синтаксис:

 размер фона: ширина высота;

Примечание:

Если первое значение опущено, изображение принимает исходную ширину.
Если второе значение опущено, изображение принимает исходную высоту.

Пример 1: В этом примере размер фона устанавливается по ширине и высоте.

< html >

< голова 000 000 000 000 000

Установить размер фонового изображения

title >

< 0004> 0005 0004 {

высота: 200 пикселей;

ширина: 400 пикселей;

фон:

размер фона: 400 пикселей 200 пикселей;

}

стиль >

000 000 000 000 000 000 000 000

корпус >

< div id = «myDiv» > div > div > 000 000 000 000 >

html >

Вывод:

Пример 2: В этом примере размер фона устанавливается в процентах.

< html >

< голова 000 000 000 000 000

Установить размер фонового изображения

title >

< 0004> 0005 0004 {

высота: 200 пикселей;

ширина: 400 пикселей;

фон:

/ * Установить размер фона в процентах * /

Размер фона: 70%;

фоновый повтор: без повтора;

}

стиль >

головка > 000 000 000 000 000 000 000 000 000 >

< div id = "myDiv" > div >

html >

Вывод:

размер фона · Документы WebPlatform

Сводка

Задает размер фоновых изображений.

Обзорная таблица

Начальное значение: авто
Относится к: Все элементы
Унаследовано: Нет
Медиа: визуальный
Расчетное значение: для абсолютное значение, иначе процент
Анимационный: Да
Свойство объектной модели CSS: фон Размер
в процентах: см. Текст

Синтаксис

размер фона: авто
размер фона: содержать
размер фона: обложка
размер фона: длина
размер фона: процент

Значения

авто: По умолчанию.См. Примечания.
содержат: Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до максимального размера, чтобы и его ширина, и его высота могли уместиться в области позиционирования фона.
крышка: Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до наименьшего размера, чтобы и его ширина, и его высота могли полностью покрывать область позиционирования фона.
длина: Число с плавающей запятой, за которым следует обозначение абсолютных единиц ( см , мм , дюймов , pt или шт ) или обозначение относительных единиц ( em , ex , или пикселей ).

Для получения дополнительной информации о поддерживаемых единицах длины см. Справочник по значениям и единицам измерения CSS.

процент: Целое число, за которым следует процент (%). Процентное значение относится к области позиционирования фона.

Примеры

Базовый список примеров синтаксиса для background-size.

 
размер фона: обложка
размер фона: содержать


размер фона: 50%
размер фона: 3em
размер фона: 12 пикселей
размер фона: авто


размер фона: 50% авто
размер фона: 3em 25%
размер фона: авто 6 пикселей
размер фона: авто авто


размер фона: авто, авто
размер фона: 50%, 25%, 25%
background-size: 6px, авто, содержать

размер фона: наследовать

Структура HTML серии

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

   Размер исходного изображения составляет 273 x 286 пикселей, а его внешняя часть имеет прозрачную область размером примерно 45 пикселей. 

  background-size: auto auto;  
  background-size: contain;  
  background-size: cover;  
  размер фона: 20% 25%;  
  background-size: 100px 400px;  
  background-size: 100% 250px;  
  background-size: 100% 250px, 20% 25%;

CSS применен к примеру HTML, показанному выше.

  div {
   ширина: 17%;
   высота: 200 пикселей;
   отступ: 10 пикселей;
   радиус границы: 20 пикселей;
   box-shadow: 2px 2px 10px rgba (0,0,0,0.75);
   плыть налево;
   маржа: 0 20px 20px 0;
   цвет фона: rgba (0,0,0,0.25);
   фоновое изображение: URL (/logo/wplogo_transparent_xlg.png);
 }

 code {
   цвет фона: rgba (255,255,255,0.7);
   отступ: 2 пикселя;
   радиус границы: 5 пикселей
 }

.один {
  размер фона: авто авто;
}

.два {
  размер фона: содержать;
}

.три {
  размер фона: обложка;
}

.four {
  размер фона: 20% 25%;
}

.5 {
  размер фона: 100 пикселей 400 пикселей;
}

.шесть {
  размер фона: 100% 250 пикселей;
}

.Семь {
  фоновое изображение: url (/logo/wplogo_transparent_xlg.png), url (/logo/wplogo_transparent_xlg.png);
  размер фона: 100% 250 пикселей, 20% 25%;
}

Посмотреть живой пример

Банкноты

Замечания

авто Значение для одного измерения разрешается с использованием внутреннего соотношения изображения и размера другого измерения. Если какое-либо из этих значений недоступно, используется внутренний размер изображения.Если внутренний размер изображения недоступен, ему присваивается значение 100%. Если оба значения равны авто , используйте внутреннюю ширину, высоту или и то, и другое изображения. Если изображение не имеет ни внутренней ширины, ни внутренней высоты, его размер определяется как для , содержащего . Отрицательные значения не допускаются. В Windows Internet Explorer 9 фон окна может состоять из нескольких слоев. Количество слоев определяется количеством значений, разделенных запятыми, в свойстве background-image .Каждое из изображений имеет размер, расположение и мозаику в соответствии с соответствующим значением в других свойствах фона ( background-attachment , background-clip , background-origin , background-position , background-repeat и размер фона ). Первое изображение в списке - это ближайший к пользователю слой, следующее закрашивается за первым и так далее.

Связанные спецификации

CSS Backgrounds and Borders Module Level 3: Кандидат в рекомендации