В CSS2.1 фоновые изображения, примененные к контейнеру, сохранили свои фиксированные размеры. К счастью, CSS3 вводит свойство background-size которое позволяет растягивать или сдавливать фон. Идеально, если вы создаете шаблон с использованием методов адаптивного веб-дизайна.
Существует несколько способов определения размеров: просмотрите страницу демонстрации размера фона CSS3 .
Абсолютное изменение размера
Измерения длины могут применяться с использованием:
background-size: width height;
По умолчанию для ширины и высоты установлено значение auto котором сохраняются исходные размеры изображения.
Мы можем изменить размер изображения до нового размера, используя абсолютные измерения, такие как px, em, cm и т. Д. При необходимости будет изменено соотношение сторон, поэтому, если наше фоновое изображение имеет размер 200 × 200 пикселей, следующий код сохраняет эту высоту, но делит пополам ширина:
background-size: 100px 200px;
Если определена только одна длина, она считается шириной. Высота установлена на auto и изображение сохранит свое соотношение сторон, т.е.
background-size: 100px; /* is identical to */ background-size: 100px auto;
Этот код будет масштабировать наше изображение 200 × 200 до 100 × 100 пикселей.
Относительное изменение размера с использованием процентов
Если используется процентное соотношение, размерность зависит от содержащего элемента, а НЕ от размера изображения, например
background-size: 50% auto;
Ширина фонового изображения, следовательно, зависит от размера его контейнера. Если ширина нашего контейнера составляет 500 пикселей, размер нашего изображения изменяется до 250 × 250.
Использование процента может быть полезно для отзывчивых проектов. Измените размер демонстрационной страницы, чтобы узнать, как меняются размеры.
Масштабирование до максимального размера
Свойство background-size также принимает ключевое слово contain . Это масштабирует изображение, чтобы оно соответствовало контейнеру. Другими словами, изображение будет пропорционально увеличиваться или уменьшаться, но ширина и высота не будут превышать размеры контейнера:
background-size: contain;
Заполнение фона
background-size также принимает ключевое слово cover . Изображение масштабируется, чтобы соответствовать всему контейнеру, но, если у него другое соотношение сторон, изображение будет обрезано:
background-size: cover;
Определение размера нескольких фонов
Размер нескольких фонов можно изменить, используя разделенный запятыми список значений, которые применяются в том же порядке, например
background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;
Совместимость браузера
Последние версии всех браузеров поддерживают background-size без префикса.
IE8 и ниже не поддерживают свойство. Вы можете использовать фильтр IE для эмуляции содержимого и обложки, но изменить размер фоновых изображений невозможно, не прибегая к хитростям, таким как использование реальных изображений за другими элементами. Это грязно; Я рекомендую изящную деградацию.
Сокращенное обозначение
W3C CSS Backgrounds and Borders Модуль Уровень 3 Спецификации состояния background-size могут быть определены после background-position в сокращенной background записи. Ни один из браузеров не поддерживает эту опцию, поэтому пока background-size должен быть определен как отдельное свойство.
Посмотреть демонстрационную страницу CSS3 размера фона …
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .