Как изменить размер background image в css

background-size

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

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

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

background-size: [, ]*

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

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

Песочница

auto auto 100% 100% auto 100% 100% cover contain

Пример

background-size

Объектная модель

Объект.style.backgroundSize

Примечание

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

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

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

Opera 9.5 некорректно устанавливает положение фиксированного фона.

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

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

10.53

4.1

3.6

2.3

5.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

background
background-attachment
background-clip
background-image
background-origin
background-position
background-repeat
Анимация ссылок при наведении
Масштабирование фона
Несколько фоновых картинок
Установка фона и градиента

Основные принципы маскирования в CSS

В мире дизайна маскирование является популярной техникой реализации уникальных эффектов. Будучи дизайнером, я сам использовал эту технику много раз, но не очень часто в веб-среде. Думаю, что от её применения на сайтах меня удерживала недостаточная поддержка браузерами. Полноценно этот функционал поддерживается в Safari и Firefox, а вот в браузерах на движке Blink (Chrome и Edge) — лишь частично.

Радует то, что тема CSS маскирования будет частью Interop 2023, а значит, вскоре можно ожидать кросс-браузерную поддержку этой возможности (Вау!).

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

Содержание

Что такое маскирование?
Как применять маски в CSS?
Маскирование с использованием градиентов
Практические примеры
- Затенение изображения
- Маскирование текста: пример 1
- Маскирование текста: пример 2
- Маскирование списков
- Интересные эффекты для изображений
- Скругление вкладок
- Вырезка нескольких аватаров
Что такое маскирование?

В своей сути маскирование подразумевает скрытие части элемента без его стирания.

Взгляните на этот рисунок:

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

Принцип заключается в скрытии некоторых частей изображения без их стирания.

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

Например, можно создать градиентную маску:

В градиенте присутствуют закрашенные и прозрачные пиксели. Закрашенные соотносятся с видимыми частями элемента, а прозрачные — со скрытыми.

В Photoshop можно добавлять слой маски к целой группе слоёв, таким образом применяя его к содержимому этой группы. При этом для маскирования части группы используется инструмент «кисть».

Маскированное содержимое не стирается, а лишь скрывается (обратите внимание на элементы группы).

Хорошо, теории хватит. Далее мы разберём способы маскирования в CSS.

Как применять маски в CSS

В CSS есть несколько способов для маскирования элементов:
- свойство mask ;
- свойство clip-path ;
- SVG .
Его можно назвать сокращённым вариантом свойства background , но со своими особенностями.

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

Применение background выглядит так:
```
.card__thumb < background-image: url('hero-cool.png'); >А применение маски так: .card__thumb
```
Круто, правда? Такой подход существенно упростит понимание и запоминание масок.

Теперь повторим в CSS наш первый пример.

Для начала нужно экспортировать фигуру в виде изображения png.

Предположим, я хочу применить к этому изображению маску.
Можете предположить, какой получится результат? По умолчанию маска будет повторяться, и её размер будет соответствовать размеру её изображения. Сейчас результат получится такой:

Чтобы это исправить, mask-repeat , как и в случае с фоновыми изображениями, нужно установить на no-repeat .

Прекрасно! Заметьте, что маска оказалась в верхнем левом углу. Её положение можно изменить с помощью mask-position . Опять же, обратите внимание, что синтаксис идентичен синтаксису для фоновых изображений.

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

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

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

В CSS маскирование – это не просто использование изображения. Здесь мы также можем задействовать градиенты для создания мощных и полезных эффектов.

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

В следующем примере mask-image состоит из линейного градиента, переходящего от чёрного к прозрачному.

По умолчанию это означает, что альфа-канал изображения маски, будет умножен на альфа-канал элемента. Управлять этим можно с помощью свойства mask-mode .

То есть вы можете использовать для маски любой цвет, поскольку предустановленный режим маскирования установлен на alpha (позднее я поясню это более подробно).

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

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

Практические примеры

▍ Затухание изображения

В качестве интересного варианта применения маскирования можно привести затухание изображения при его смешивании с фоновой картинкой.

Взгляните на эту картинку:

На первый взгляд тут можно добавить градиент с тем же цветом, что и фон. Например, так:
```
.hero__thumb:after
```
И хотя такой вариант может сработать, при изменении фонового цвета всё нарушится. Обратите внимание, что hero-изображение теперь имеет жёсткий переход:

В качестве альтернативы можно маскировать hero-изображение так, чтобы оно работало с любым цветом фона.
```
.hero__thumb
```
Вот и всё! Теперь эффект затухания реален и при изменении фона основной страницы не нарушится.

▍ Маскирование текста: пример 1

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

Возьмём следующий рисунок:

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

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

Мне нравится сначала реализовывать сам градиент для предварительной визуальной оценки и уже потом применять его в качестве маски.
```
.c-card__footer
```
Градиент готов. Теперь можно задействовать его в качестве маски:
```
.c-card__footer
```
Получилось не идеально? Можно поэкспериментировать со значениями градиента, пока не будет достигнут желаемый результат.

▍ Маскирование текста: пример 2

Это тот же пример, но теперь градиент будет вертикальным. Я видел такое в роликах на Instagram.

Взгляните на следующее изображение:

Обратите внимание, что верхняя часть текста размывается. В этой небольшой области могут находиться комментарии к ленте, действия и прочее. Маскирование идеально для этого подойдёт.

Для начала посмотрим на сам градиент.

В CSS это может выглядеть так:
```
.whatever-the-class-name
```
▍ Маскирование списков

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

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

Теперь посмотрим на градиентную маску, чтобы понять, как она работает.

В CSS это будет выглядеть так:
```
.list
```
▍ Интересные эффекты для изображения

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

Вот простой дизайн, который я сделал для этого демо.

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

Взглянем на градиенты более детально:
```
.thumb
```
Визуально маска выглядит так:

Для создания эффекта затухания в каждом прямоугольнике маски нужно обновить градиент и добавить ключевое слово transparent .
```
.thumb
```
▍ Скругление вкладок

Я также подумал о возможном применении масок к функционалу UI под названием «скругление углов» (round out corners).

Наша задача — скруглить стороны элемента так, чтобы они смешались с его border-radius .

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

Для начала повнимательнее взглянем на фигуру, которую нужно получить.

Она состоит из квадрата и круга, и нам нужно их пересечение.

Как этого достичь? Можно использовать многослойные маски, объединив их с помощью свойства mask-composite .

Первым делом мы создадим элемент для хранения самой маски.
```
.nav-item.active:before
```
Внутри этого пространства нужно нарисовать круг и квадрат, которые будут совмещаться. Удобно то, что это можно сделать путём смешения линейного и радиального градиентов.
```
.nav-item.active:before
```
Обратите внимание на следующее:
- в качестве размера квадрата я установил 12px 12px;
- квадрат расположен в левом нижнем углу (bottom left);
- для фигуры квадрата background-repeat не требуется.
Картинка выше просто визуально показывает, как будут выглядеть два градиента. Следующим шагом идёт их создание. В CSS объединить две фигуры можно с помощью свойства mask-composite .
```
.nav-item.active:before
```
В итоге получится:

Код выше предназначен для фигуры справа. Для второй же стороны можно просто изменить mask-position .
```
.nav-item.active:after < /* другие стили */ mask-position: bottom right, center; >
```
▍ Вырезание нескольких аватарок

В своей статье (англ.), посвящённой эффекту вырезания, я рассказал о нескольких способах его реализации в CSS.

Один из приведённых там примеров хорошо подходит для маскирования.

В этом случае можно получить такой эффект с помощью радиального градиента.
```
.avatar
```
Очень рекомендую ту статью, так как в ней есть много подробных примеров вроде приведённого выше.

Заключение

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

Дополнительные ресурсы

Если вы хотите отточить навыки на дополнительных примерах, то рекомендую следующие материалы:
- A Fancy Hover Effect For Your Avatar от Temani Afif
- Mask Compositing: The Crash Course Ana Tudor
- CSS only Speech Bubble Temani Afif
- Fancy gradient border on hover от Temani Afif
CSS Background — Color, Image, Position и другие свойства для работы с фоном

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

Свойство CSS background

Это свойство позволяет определять в CSS фон любого элемента на странице. Оно универсальное, т.е. позволяет задавать сразу несколько характеристик (более специфичных свойств) фона, которые можно указывать в любом порядке.
```
#container < background: url('/image.png') /* background-image */ top center / contain /* background-position / background-size */ no-repeat /* background-repeat */ fixed /* background-attachment */ padding-box /* background-origin */ content-box /* background-clip */ green /* background-color */ >
```
Обратите внимание, что background-size нужно указывать через слэш (/) сразу после background-position .

Такое написание, конечно, экономит много времени, но я так не делаю. Почему?

1. Код хуже читается. Особенно если свойства указаны в случайном порядке
```
#element-1 < background: no-repeat center/80% url('image-1.png'); >#element-2 < background: url('image-2.png') top left repeat content-box; >#element-3
```
2. Если какое-то свойство не задано — используется дефолтное, соответственно иногда возникают непредвиденные последствия. Поэтому для новичков или не очень внимательных людей не подходит.
```
article
```
В приведенном выше примере изначально заданное свойство background-color: red переопределяется на transparent , т.к. цвет фона не задан в свойстве background и используется дефолтное значение. Я в такое раньше часто и подолгу тупил, не понимая, в чем ошибка, и в какой-то момент решил для себя, что гораздо эффективнее / удобнее / эстетичнее указывать отдельные свойства отдельно, простите за тавтологию.

Итак, помимо универсального свойства background , в CSS есть 8 свойств для работы с фоном элемента:
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
- background-color
Свойство CSS background-image

Это свойство используется для того, чтобы задать в качестве фона изображение (.png, .jpg, .gif, .svg) или градиент (по сути также являющийся изображением, которое генерирует браузер).
```
body
```
В качестве значения url() указывается путь к файлу изображения или data URI (изображение, закодированное в base64). Кавычки можно использовать как одинарные, так и двойные, а можно и вообще не использовать. В данном случае это дело вкуса.

Для того, чтобы задать в качестве фонового изображения градиент (постепенный переход от одного цвета к другому) используются CSS-функции linear-gradient() и radial-gradient() .
```
.linear-gradient < background-image: linear-gradient(black, white); >.radial-gradient
```
linear-gradient() создает переход между цветами как бы вдоль прямой линии (например, слева направо, сверху вниз, из левого нижнего угла в правый верхний и т.д.).

radial-gradient() создает переход от центра к периферии.

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

Свойство CSS background-position

При помощи этого свойства в CSS можно задавать положение фонового изображения или градиента относительно границ элемента.
```
.absolute < background-position: 10px 30px; >.relative
```
Значения могут быть либо абсолютными (px, em или другие единицы), либо относительными (%). При этом сначала указывается значение по горизонтали, а потом по вертикали.

Если с абсолютными значениями все просто (так сказать, как слышится, так и пишется), то с относительными немного сложнее. Значение background-position: 10% 20% означает, что точка, находящаяся на 10% правее левого края изображения будет находиться на 10% правее левого края элемента, а точка, находящаяся на 20% ниже верхнего края изображения будет находиться на 20% ниже верхнего края элемента.

Кроме того, в качестве значений background-position можно использовать ключевые слова ( top , bottom , left , right , center ). В этом случае порядок не имеет значения.

Дефолтное значение background-position — 0 0, т.е. изображение находится в левом верхнем углу элемента.
```
.keyword
```
Свойство CSS background-size

Свойство background-size определяет размер (масштаб) фонового изображения или градиента. В качестве значений можно использовать либо ключевые слова ( auto (дефолтное значение), cover , contain ), либо относительные (%) или абсолютные (px) величины.
```
.cover < background-size: cover; >.relative < background-size: 200%; >.absolute
```
Если используются ключевые слова:
- background-size: cover означает, что фоновая картинка должна покрывать всю площадь элемента, даже если для этого ее нужно растянуть или обрезать по одному краю.
- background-size: contain означает, что фоновая картинка должна полностью поместиться в размеры элемента, даже если часть его площади будет не покрыта ей.
- background-size: auto означает, что размер изображения будет рассчитан браузером в зависимости от его размера и соотношения сторон.
Если background-size задается в процентах или пикселях, можно указывать одно значение (например, background-size: 80% ) или два (например, background-size: 200px 400px ). В первом случае, задается ширина изображения, а высота рассчитывается автоматически. Во втором задаются ширина и высота соответственно.

Свойство CSS background-repeat

Это свойство определяет нужно ли повторять фоновое изображение (если, конечно, оно задано) и как это делать.
```
.no-repeat < background-repeat: no-repeat; >.repeat
```
В качестве значений background-repeat принимает следующие ключевые слова:
- inherit — наследуется значение родительского элемента
- repeat — картинка повторяется как по вертикали, так и по горизонтали
- repeat-x — картинка повторяется по горизонтали
- repeat-y — картинка повторяется по вертикали
- no-repeat — картинка выводится один раз и не повторяется
- space — картинка повторяется по горизонтали и вертикали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они равномерно распределяются
- round — картинка повторяется по вертикали и горизонтали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они растягиваются или сжимаются
Последние два значения проще понять на следующем примере. Попробуйте изменить размеры синего и оранжевого блоков.

Свойство CSS background-attachment

При помощи background-attachment в CSS описывается положение фонового изображения относительно вьюпорта (видимой области экрана). В качестве значения этого свойства используются следующие ключевые слова:
- scroll — значение по умолчанию, картинка зафиксирована в пределах элемента, который движется во время скролла вьюпорта (надеюсь, эврисинг понятно 😉
- fixed — картинка зафиксирована в пределах вьюпорта, даже не смотря на то, что элемент, в котором она находится, движется при скролле
- local — картинка скроллится внутри элемента.
Осознаю, что сказанное выше похоже на кашу из слов, но я старался как мог. Проще всего проиллюстрировать свойство background-attachment на примерах.

Попробуйте поскроллить весь пример и отдельные его элементы.

Свойство CSS background-origin

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

Свойство CSS background-clip

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

В качестве значений используются следующие ключевые слова:
- border-box (значение по умолчанию) — фон выступает до внешнего края границы (border) элемента.
- padding-box — фон выступает до внешнего края поля отступа (padding) элемента.
- content-box — фон не выступает за пределы области контента элемента.
Сравните свойства CSS background-clip и background-origin на примерах.

Свойство CSS background-color

Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:

HEX или HEX с альфа-каналом

НЕХ (hexadecimal) — обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два — зеленую, а два последних — синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв — это шестнадцатеричное число.

Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 — полностью прозрачный, ff — полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.
```
.color.hex < background-color: #9C27B0; >.color.hex-alpha
```
RGB или RGBa

Цвет можно задать при помощи функций CSS rgb() и rgba() . Синтаксис предельно простой — значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции rgba() указывается четвертый параметр — прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).
```
.color.rgb < background-color: rgb(0, 200, 81); >.color.rgba.red < background-color: rgba(255, 0, 0, .5); >.color.rgba.green
```
HSL или HSLa

HSL — расшифровывается как Hue — тон, Saturation — насыщенность и Lightness — светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате — hsl() и hsla() . В качестве аргументов обеих по порядку указываются:
- hue — расположение тона на цветовом колесе (от 0 до 360)
- saturation — насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% — серый, а 100% — полный цвет.
- lightness — светлота или яркость, где 0% — максимально темный (черный), 50% — нормальный, 100% — максимально светлый (белый)
- alpha (только для hsla() ) — прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 — полностью прозрачный, 100% или 1 — полностью непрозрачный).
```
.color.hsl < background-color: hsl(0, 80%, 50%); >.color.hsla
```
HTML-цвета

Цвет фона элемента можно задать при помощи его названия на английском языке. Всего 147 вариаций от банальных black и white до экзотических, типа PaleGoldenrod или CornflowerBlue . Названия указываются в одно слово без пробелов. Регистр не учитывается.
```
.color.magenta < background-color: magenta; >.color.green
```
Ключевые слова

Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:
- initial — устанавливает в качестве цвета фона дефолтное значение, т.е. transparent
- inherit — задает цвет фона как у родительского элемента
- transparent — делает фон элемента прозрачным
- currentColor — переменная, значение которой соответствует значению свойства color текущего элемента, а если оно не задано, используется color родительского элемента.
```
.color.current
```
Использование этого ключевого слова, на мой взгляд, нецелесообразно, т.к. фон и текстовый контент элемента будут сливаться.

Что еще нужно знать про CSS background

Множественные фоны

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

Это можно делать либо через универсальное свойство background :
```
.multiple < background: url('image-1.png') center top no-repeat, /* Первый фон */ url('image-2.png') repeat; /* Второй фон */ >
```
Либо через отдельные свойства фона
```
 .multiple
```
Множественные фоны накладываются друг на друга как слои, при этом изображение, указанное раньше находится выше, чем изображение, указанное позже, а заливка ( background-color ) всегда находится на самом нижнем слое.

В приведенном ниже примере попробуйте изменить размеры основного элемента (потяните за его правый нижний угол).

Режимы наложения — background-blend-mode

По умолчанию, если у элемента задано и фоновое изображение и цвет заливки, изображение (конечно, если оно непрозрачное) просто перекрывает заливку. С множественными изображениями та же история — верхнее перекрывает нижнее.

В CSS можно указывать режим(ы) наложения фонов. Это делается при помощи свойства background-blend-mode , которое поддерживается всеми современными браузерами.
```
.blend
```
Для всех, кто пользуется Фотошопом или Иллюстратором и знаком с режимами смешивания слоев (Blend Modes), это свойство будет очень кстати. Особенно учитывая, что названия режимов смешивания совпадают с названиями в графических редакторах:
1. normal
2. multiply
3. screen
4. overlay
5. darken
6. lighten
7. color-dodge
8. color-burn
9. hard-light
10. soft-light
11. difference
12. exclusion
13. hue
14. saturation
15. color
16. luminosity
Вот, собственно и все, о чем я хотел рассказать в этой статье. Надеюсь, она будет вам полезна. Как всегда, буду рад ответить на ваши вопросы в комментариях.

Изменить размер изображения пропорционально с CSS? [Дубликат]

Есть ли способ уменьшить размер изображения (уменьшать масштаб) пропорционально, используя ТОЛЬКО CSS? Я делаю JavaScript, но просто пытаюсь понять, возможно ли это с помощью CSS.

codingbear 25 апр. 2009, в 00:58
Поделиться

Итан Маркотт недавно тщательно исследовал эту проблему . Краткий ответ — да, это возможно, но не во всех браузерах.

Mark Hurd 25 апр. 2009, в 00:02

Если вы не хотите использовать пропускную способность, может помочь slimmage.js ; он считывает результирующее значение max-width чтобы указать, какой размер изображения запрашивается.

Lilith River 08 июль 2013, в 16:05
Вы можете просто установить ширину изображения, высота регулируется автоматически.
Rik Telner 08 апр. 2014, в 18:54
Показать ещё 1 комментарий
Поделиться:

16 ответов

Чтобы изменить размер изображения пропорционально с помощью CSS:
```
img.resize < width:540px; /* you can use % */ height: auto; >
```
Mkk 26 апр. 2010, в 10:24
Поделиться
Это работает, даже если тег img имеет атрибуты высоты и ширины. +1
Surreal Dreams 11 июнь 2012, в 19:48

+1 Вы также можете использовать max-width вместо width при желании. Ключ должен использовать height:auto для переопределения любого атрибута height=». » уже присутствующего на изображении.

Phrogz 30 июль 2012, в 17:30
В моем случае я использовал фиксированную высоту и установил ширину на авто 🙂 Спасибо!
KarenAnne 28 янв. 2013, в 08:45

Обычно используется для установки max-width: 100%; height: auto; такие большие изображения не превышают ширину своих контейнеров.

OdraEncoded 26 окт. 2013, в 22:00

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

GetFree 20 май 2014, в 21:04
Это не работает для меня в IE.
Chase Roberts 20 янв. 2015, в 21:16
как насчет auto\9 для IE, это все еще работает?
Peter 22 май 2018, в 07:48
Это не работает на изображении с высотой> шириной (например, Портрет)
Raynal Gobel 28 авг. 2018, в 07:53
Показать ещё 6 комментариев

Размер управления и пропорция поддержки:
```
#your-img
```
Cherif 19 март 2013, в 15:15
Поделиться
Дело в том, что max-width и max-height интерпретируются не всеми браузерами, такими как IE, верно?
alexserver 09 апр. 2014, в 19:15
@alexserver Это работает в MSIE> = 7: cssportal.com/css-properties/max-width.php
gouessej 17 июнь 2015, в 08:31

Этот ответ намного лучше . Вы можете установить максимальную границу для ширины и высоты, сохраняя соотношение.

olivarra1 30 окт. 2015, в 10:47

Да, это правильный ответ на вопрос, поскольку он принимает во внимание ориентацию изображения (то есть пейзаж против портрета). Спасибо!

katamayros 14 дек. 2015, в 12:00
Показать ещё 2 комментария

Если это фоновое изображение, используйте background-size: contains.
```
#your-div
```
lenooh 20 дек. 2013, в 18:23
Поделиться
Или background-size:cover; , который будет охватывать всю площадь.
Turion 17 май 2014, в 13:15
фон-размер: содержать; работает для меня.
jasonleonhard 24 нояб. 2014, в 22:16
Также добавьте желаемую ширину и высоту = 100%
Guy Lowe 28 апр. 2015, в 13:27

@Turion Awesome, спасибо, отлично работает и исправляет проблемы масштабирования, вызванные max-width: 300px;

Underverse 14 сен. 2016, в 02:07
Показать ещё 2 комментария
```
transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); 
```
orome 17 янв. 2014, в 03:27
Поделиться

На самом деле это работает довольно хорошо, если вам нужно уменьшить каждое изображение пропорционально его размеру. С этим кодом изображения становятся в 2 раза меньше. +1 НО! С этим решением изображения все еще занимают место!

Mārtiņš Briedis 26 фев. 2014, в 11:31

@ MārtiņšBriedis: Разве не в этом смысл? Есть ли способ заставить изображения на сервере занимать меньше места «используя ТОЛЬКО CSS» (см. OP) ?!

orome 30 сен. 2014, в 12:10

Не такого рода пространство. Изображения по-прежнему имеют те же границы, ширину и высоту в документе, только они «выглядят» в 2 раза меньше. Представьте себе — изображение размером 100х100. Затем вы применяете масштаб (0,5), и он такой же, как изображение 50×50, но с невидимыми границами 25px с обеих сторон. Изображение все равно будет занимать пространство 100×100. —

Mārtiņš Briedis 30 сен. 2014, в 12:25

@ MārtiņšBriedis: Хммм. Я должен попробовать это. Это было какое-то время, и казалось, что он делал то, что хотел.
Похожие публикации: