Background image cover: CSS background-size property

Разное 

background-size | WebReference

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

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

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

Синтаксис

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

<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain

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

Значения

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

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

Песочница

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

div {
  background-size: {{ playgroundValue }};
}

Пример

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

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

Объект.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 (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91213910. 5334.13.64
2.314115.1
Браузеры

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

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

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

Цвет и фон

См. также

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

Рецепты

  • Как сделать фоновую картинку на всю ширину?

Практика

  • Масштабирование фона
  • Масштабирование фона 2
  • Масштабирование фона 3

Параметры фонового изображения CSS3 | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Параметры фонового изображения CSS3

— CR

  • Глобальное использование
    97,87% + 1,27% «=» 99,14%

Новые свойства для фоновых изображений, включая background-clip, background-origin и background-size

Chrome
  1. 4 — 14: Partial support
  2. 15 — 109: Supported
  3. 110: Supported
  4. 111 — 113: Supported
Edge
  1. 12 — 109: Supported
  2. 110: Supported
Safari
  1. 3. 1 — 6.1: Partial support
  2. 7 — 16.2: Supported
  3. 16.3: Supported
  4. 16.4 — TP: Supported
Firefox
  1. 2 — 3.5: Not supported
  2. 3.6: Partial support
  3. 4 — 109: Поддерживается
  4. 110: Поддерживается
  5. 111 — 112: Поддерживается
Opera
  1. 9 — 9,6: не поддерживается
  2. 10: Partial Support
  3. 15 — 94: 94: 94:
    4. : —:::
IE
  1. 08% — Not supported»> 5,5 — 8: не поддерживается
  2. 9 — 10: Поддерживается
  3. 11: Поддерживается
Chrome For Android
  1. 110: поддержал
.0096 3,2 — 4,3: частичная поддержка
  • 5: Частичная поддержка
  • 6: Частичная поддержка
  • 7 — 16,2: поддержано
  • 16,3: поддерживается
  • 16,4: поддержан
    • SAMSUNG Internet
      1111111111111111111111111111115

      .
    • 20: поддержан
      • Opera Mini
      1. ALL: Частичная поддержка
      Opera Mobile
      1. 00% — Supported»> 10 — 12.1: Поддерживается
      2. 73: Поддержка
      UC Brovash0014
      1. 13.4: Supported
      Android Browser
      1. 2.1: Partial support
      2. 2.2 — 2.3: Partial support
      3. 3 — 4.3: Partial support
      4. 4.4 — 4.4.4: Supported
      5. 109: Supported
      Firefox for Android
      1. 110: Supported
      QQ Browser
      1. 13.1: Supported
      Baidu Browser
      1. 00% — Supported»> 13.18: Supported
      KaiOS Browser
      1. 2.5: Поддерживается
      2. 3: Поддерживается

      Firefox, Chrome и Safari поддерживают неофициальный -webkit-background-clip: текст (только с префиксом). Safari не поддерживает -webkit-background-clip: text; для <button> элементов. Но вы можете поместить <span> внутрь <button> , чтобы получить тот же результат.

      Ресурсы:
      Подробные таблицы совместимости и демонстрации
      MDN Web Docs — background-image
      Polyfill для IE7-8
      Подфункции:
      Background-clip: text

      СПРАВОЧНЫЙ ЦЕНТР TILDA

      Создание и редактирование титульной страницы сайта

      Фоновое изображение

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

      Подробнее

      Форматирование текста на титульном листе

      Настройка заголовка, подзаголовка и другого текста

      Подробнее

      Высота обложки

      Как сделать узкую обложку, которая не занимает всю высоту первого экрана

      Подробнее

      Обложка page filter

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

      Подробнее

      Видео на титульной странице

      Настройка видео, которое будет воспроизводиться в фоновом режиме или при нажатии кнопки «Воспроизвести»

      Подробнее

      Титульная страница для мобильного просмотра

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

      Подробнее

      Форма на титульном листе

      Настройка формы сбора данных на главном экране

      Подробнее

      Таймер на титульном листе

      Добавление таймеров обратного отсчета на определенное время и дату

      Подробнее

      Преобразование в нулевой блок

      Как преобразовать и отредактировать титульную страницу в нулевом блоке

      Подробнее

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

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

      Область просмотра

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

      Фоновое изображение

      Загрузить фоновое изображение обложки в панели Контент блока→ Фоновое изображение.

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

      Лучший размер:
      Оптимальные параметры загружаемых изображений:
      Формат: JPG
      Ширина: 1680px
      Разрешение: 72 dpi
      Цветовая модель: RGB
      Сжатие: 10

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

      Как оптимизировать изображения для Интернета

      Перед выбором изображения прочитайте нашу статью «Как сделать обложку для сайта» на Tilda Education. Он содержит советы по созданию собственной титульной страницы и ссылки на веб-сайты с качественными фотографиями.

      Форматирование текста

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

      Наполнить обложки текстом можно двумя способами: с помощью панели «Содержимое» блока или нажав на текст при редактировании страницы.

      Редактирование текста при нажатии на блок

      Редактирование текста в разделе «Содержимое» блока

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

      Форматирование текста с помощью верхней панели управления

      Изменение форматирования в панели настроек блока

      Чтобы создать крутую обложку, ознакомьтесь со статьей Как создать обложку для сайта с практическими примерами сочетания текста и фонового изображения и руководство Создание уникального торгового предложения (УТП) для веб-сайта, чтобы сделать вашу титульную страницу привлекательной для посетителей менее чем за десять секунд.

      Высота обложки

      Тонкая обложка имеет высоту 60% или 70%, а не 100%. Он выполняет более формальную функцию, поскольку внимание пользователя переключается на информацию, следующую за обложкой.

      Чтобы создать такую ​​обложку, перейдите в поле «Высота» в настройках блока. Вы можете установить высоту в пикселях (например, 400px) или в единицах измерения высоты окна просмотра, в процентах (1vh — это 1% видимой области). Мы рекомендуем устанавливать высоту в vh.

      Цвет обложки: Настройки фильтра

      Как изменить тон фонового изображения
      Мы меняем тон изображения, когда хотим сделать текст обложки легко читаемым. Для этого откройте панель настроек блока обложки и настройте цвет фильтра. Здесь вы можете увидеть обложку, к которой был применен один цвет фильтра. Иногда для тонирования используется фирменный цвет или основной цвет веб-сайта.

      Настройки фильтра в панели контента блока

      Обложка Tilda Help Center: фильтр постепенно переходит в сплошной оранжевый цвет

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

      Making the cover twice as high while applying these two settings at once will help you achieve the effect shown below:

      Gradient and Color Fill

      org/ImageObject»>

      There в настройках блока два параметра тонирования: непрозрачность и цвет. Установите непрозрачность на 100% и выберите цвет — это будет цвет обложки.

      Если выбрать разные цвета, один будет плавно переходить в другой.

      Обложка видео

      Вы можете использовать видео вместо изображения. Есть два способа сделать это.

      Как добавить видео на YouTube

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

      Наша компания

      Эксперты в области искусства

      Art Basel организует художественные выставки высокого качества современного искусства и ежегодно проходит в Базеле, Майами-Бич и Гонконге

      Как добавить видео WebM и MPEG-4

      Вы можете использовать онлайн-конвертеры для создания видео WebM и MPEG-4 и размещения их на своем сервере или веб-сайте службы преобразования. Например, gfycat.com допускает как конвертацию, так и хостинг.

      Откройте панель настроек блока обложки и добавьте ссылки на видео в соответствующие поля.

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

      Важный момент: В настоящее время нет возможности загрузить свой видеофайл на Тильду, но вы можете воспользоваться сторонними сервисами, дающими прямую ссылку на видеофайл.
      Некоторые популярные облачные службы также предоставляют прямую ссылку на файл. Например, чтобы получить прямую ссылку на видеофайл в Dropbox, вам нужно заменить ссылку dropbox.com на dl.dropboxusercontent.com. Вы также можете загрузить файл на свои хостинги, такие как Selectel и другие.

      Титульная страница для мобильного просмотра

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

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

      Из-за особенностей мобильной ОС обложки видео не воспроизводятся на мобильных устройствах. Мобильная ОС отключает автозапуск. Если вы сделали обложку для видео с автовоспроизведением, не забудьте добавить изображение на панель «Содержимое» блока обложки. Изображение появится, когда видео не может быть воспроизведено, т. е. когда посетители заходят на ваш сайт со смартфонов или планшетов.

      Форма на обложке

      Вы можете найти форму ввода данных на следующих обложках: CR26 (обложка с полем ввода), CR26AN (обложка с несколькими входами), CR32 (обложка с формой, выровненной по правому краю), CR34 (Обложка с обратным отсчетом и формой подписки), CR36 (Обложка с изображением или видео YouTube и формой в две колонки)

      Вы можете просмотреть, как будет выглядеть форма, посетив Библиотеку блоков → Обложка и выбрав понравившийся вариант.

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

      Справочная статья Как настроить формы сбора данных

      Добавление таймера обратного отсчета

      На титульных страницах блоков CR34 и CR35 есть таймер обратного отсчета до определенного момента в будущем. Эта функция особенно удобна, если вы создаете страницу для рекламной акции или мероприятия.

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

      Если дата установлена ​​правильно, на титульном листе появится таймер.

      Преобразование титульной страницы в нулевой блок

      Блоки с обложками — проверенные примеры хорошего дизайна, которые автоматически адаптируются ко всем устройствам. Но иногда вам нужно добавить элемент или создать пользовательскую титульную страницу. Это можно сделать с помощью редактора Zero Block от Tilda.

      No related posts.

    Автор записи

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

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