Moz background size: Свойство -moz-background-size | назначение, допустимые значения, примеры

Разное 

Содержание

webkit-background-size — свойство css :: руководство cssdot.ru

Свойство -webkit-background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.

Допустимые значения

  • length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т.д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.
  • percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.
  • auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки.
  • cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
  • contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.

Примечания

Chrome 1-3, Safari 3-4

Свойство -webkit-background-size в движке WebKit изначально было реализовано в рамках черновика спецификации CSS3, в котором отсутствовали ключевые слова

contain и cover, а так же предполагалось, что если задан размер фоновой картинки с использованием только одного параметра, то второй параметр считается, не пропорционально размерам картинки, а равен первому.

Свойство -webkit-background-size относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.

Смотри также:

  • background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
  • -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
  • -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
  • Спецификация стандарта CSS 3
  • Описание на Mozilla Developer Network
  • Описание на Microsoft Developer Network
  • Описание на Safari Developer Library

Краткое описание

Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Синтаксис:

[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style[‘-webkit-background-size’]


Кроссбраузерная совместимость

Internet Explorer
не поддерживается
Firefox
не поддерживается
Chrome
1.02.03.04.15.06.07.08.09.010.011.012.013.014.015.016.017.018.019.020.0
+/-+/-+/-+++++++++++++++++
Safari
1. 01.11.21.32.03.03.24.05.0
——————+/-+/-+
Opera
не поддерживается

Атрибут background-size ᐈ Довідник CSS ➜ HTML-CSS.CO.UA

Довідник CSS атрибутів775

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

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

Значення за умовчанням auto
успадковується Ні
Застосовується До всіх елементів td>
Посилання на специфікацію http://www. w3.org/TR/css3-background/#the-background-size

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Масштабує фонове зображення відповідно до заданих розмірах.

Синтаксис

background-size: [<значення> | <відсотки> | auto] {1,2} | cover | contain

Значення

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

Якщо встановлено одне значення, воно задає ширину фону, друге значення приймається за auto . Пропорції картинки при цьому зберігаються. Використання двох значень через пробіл задає ширину і висоту фонової картинки.

Приклад

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

 <!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 .


Теги HTML5

Як заголовок зробити посиланням?

Please enable JavaScript to view the comments powered by Disqus.

Загружать фоновые изображения в зависимости от размера экрана

Оглавление

  • Адаптивный фоновый дисплей не является адаптивным Фоновая загрузка
  • Адаптивная загрузка фонового изображения
  • Предотвратить загрузку фона скрытого элемента

TLDR: если все, что вас интересует, — это код, чтобы заставить это работать, перейдите в этот раздел и возьмите фрагмент кода.

Отзывчивый фон Отображение Неотзывчивый фон Загрузка

Установка свойства background-size фона в значение «cover» позволяет нам гарантировать, что он полностью покрывает область фона на экране любого размера. Но, поскольку одно и то же изображение загружается независимо от размера экрана, этот параметр действует только с точки зрения отображения изображения, а не с точки зрения загруженного изображения. В результате вы можете загрузить фоновое изображение размером 1400 пикселей на экран мобильного устройства Google Nexus 4.

 
HTML {
  background: url('large_bg.jpg') фиксированный центр без повторов;
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}

Загрузка адаптивного фонового изображения

Использование медиа-запросов позволяет нам указывать разные фоновые изображения для разных размеров экрана исключительно с помощью CSS.

Таким образом, фоновое изображение, размер которого соответствует размеру экрана, загружается браузером.

 
Экран @media и (максимальная ширина: 480 пикселей) {
  HTML {
    background: url('small_bg.jpg') фиксированный центр без повторов;
  }
}
Экран @media и (минимальная ширина: 481px) и (максимальная ширина: 900px) {
  HTML {
    background: url('med_bg.jpg') исправлен центр без повторов;
  }
}
Экран @media и (минимальная ширина: 901px) {
  HTML {
    background: url('large_bg.jpg') фиксированный центр без повторов;
  }
}
HTML {
  размер фона: обложка;
  -webkit-background-size: обложка;
  -o-background-size: обложка;
  -moz-background-size: обложка;
}

Предотвратить загрузку фона скрытого элемента

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

 
Экран @media и (максимальная ширина: 480 пикселей) {
  HTML {
    фон: нет;
  }
}

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


Об авторе

Punit Sethi работал с крупными веб-сайтами электронной коммерции и B2C над улучшением скорости, масштабируемости и архитектуры внешнего интерфейса. Он пишет на эти темы здесь.

Glassmorphism для Firefox. Объяснение двух способов создания… | от МасаКудаматсу | Опрос веб-разработчиков из Киото

Glassmorphism для Firefox. Объяснение двух способов создания… | от МасаКудаматсу | Опрос веб-разработчиков из Киото | Средний

Опубликовано в

·

Чтение: 19 мин.

·

3 декабря 2021 г.

Firefox!)

[Если вы’ Если вы не подписываетесь на Medium, нажмите здесь, чтобы прочитать эту статью. ]

ОБНОВЛЕНИЕ (26 августа 2022 г.) : Firefox версии 103 или выше (выпущен 26 июля 2022 г. или позже) поддерживает фоновый фильтр (источник: Могу ли я использовать).

Для создания эффекта матового стекла (известного как Glassmorphism ) в сети с использованием background-filter: blur() в CSS — самый простой подход, если вы можете игнорировать… 0003

Самоучка дизайнер/разработчик веб-приложений, в настоящее время создает приложение для сохранения форматированных текстовых заметок о местах на Картах Google.

Еще от МасаКудаматсу и опроса веб-разработчиков из Киото

МасаКудаматсу

в

Как настроить кнопку загрузки файла в React

Кнопка загрузки файла по умолчанию уродлива. Настроить его стиль сложно. Я изучил решения, доступные в Интернете. Вот что я…

·7 мин чтения·31 марта 2020 г.

МасаКудаматсу

в

Как использовать HTML Canvas с React Hooks

9010 0 Я делаю веб-приложение для выбора цвета с помощью React. Для рисования растрового изображения, такого как палитра цветов в Интернете, требуется HTML-элемент…

·7 мин чтения·9 декабря 2020 г.

MasaKudamatsu

in

4 ошибки при настройке Google Maps API с Next.js и ESLint

9 0100 Next.js требует нескольких модификаций API Карт Google. официальная документация по рендерингу карты. Эта статья объясняет их все.

·9 мин чтения·12 февраля 2021 г.

MasaKudamatsu

in

Как обрабатывать недопустимые пользовательские данные в формах React для лучших практик дизайна UX

Отображение ошибки при размытии и скрытие ее сразу после исправления — лучший способ в дизайне веб-форм. Как мы можем закодировать это с помощью React?

·Чтение через 14 минут·15 марта 2021 г. ChatGPT Неправильно! Вот как опередить 99% пользователей ChatGPT

Освойте ChatGPT, изучив технику быстрого доступа.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *