Фон для обложек: Фон для обложки трека — 57 фото

В этом руководстве

Обучающее видео

Добавление блока «Обложка»

Чтобы добавить блок «Обложка», щёлкните значок + Вставка блоков и выполните поиск по ключевому слову «обложка».

💡

Чтобы быстро добавить новый блок «Обложка», в новой строке можно также набрать «/обложка» и нажать Enter.

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

Выбор изображения

После вставки блока у вас будет две опции, чтобы задать изображение или видео: Загрузить и Выбрать медиафайлы:

1. Нажмите Загрузить , чтобы добавить новое изображение или видео со своего устройства.
2. Нажмите Выбрать медиафайл , чтобы выбрать изображение или видео на сайте, в Google Фото, библиотеке бесплатных фотографий Pexels или Openverse.

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

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

Выбор блока «Обложка»

После добавления блока «Обложка» его можно выбрать в виде списка, чтобы повторно открыть его панель инструментов и панель настроек на боковой панели справа:

Советы по выбору изображения

• Лучше всего подходят декоративные или абстрактные изображения, поскольку изображение не всегда видно полностью.
• Вместо того чтобы создавать текст внутри самого изображения, введите текст поверх изображения. Так изображение будет лучше масштабироваться на экранах любого размера.
• Блок «Обложка» использует изображение в качестве фонового и не показывает его во всю ширину на устройствах разного размера. Если на изображении есть содержимое, которое должно быть видно на устройствах любого размера, лучше используйте блок «Изображение».

Добавление текста и прочего содержимого

После выбора изображения на нём можно написать заголовок. Это пригодится, например, при создании нового раздела записи или страницы. Вы также можете добавить другие блоки, которые будут отображаться поверх блока «Обложка», например блок «Кнопка» или блок «Абзац».

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

После того как вы щёлкнете блок, поверх него появится панель инструментов со следующими опциями:

Среди этих опций:

• Изменение типа блока.
• Перетаскивание блока.
• Перемещение блока выше или ниже.
• Выравнивание изображения (по левому краю, правому краю или центру; а также «Широкий формат» и «Формат во всю ширину», если они поддерживаются темой)
• Изменение расположения содержимого
• По всей высоте
• Применение двухцветного фильтра
• Использование избранных изображений
• Замена текущего изображения другим
• Дополнительные опции

Выравнивание

Подобно другим блокам с помощью панели инструментов блок «Обложка» можно выровнять по левому или правому краю либо по центру. При выравнивании по левому или правому краю рядом с блоком «Обложка» можно разместить другой блок.

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

Расположение содержимого

Используйте функцию «Расположение содержимого», чтобы настроить расположение текста и другого содержимого на изображении:

Выравнивание по всей высоте

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

Применение двухцветного фильтра

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

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

Показ избранного изображения в блоке «Обложка»

Используйте блок «Обложка», если вы хотите, чтобы избранное изображение автоматически отображалось в верхней части записи или страницы.

1. Добавьте избранное изображение в свою запись или на страницу.
2. Чтобы добавить Блок «Обложка», щёлкните значок + Вставка блока или введите «/обложка» в новую строку и нажмите Enter.
3. На панели инструментов блока «Обложка» щёлкните Добавить медиафайлы, а затем — Использовать избранное изображение. После этого автоматически подтянется текущее избранное изображение и будет добавлено в блок «Обложка».

Замена изображения

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

Настройки блока

Панель настроек блока

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

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

Фиксированный фон

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

Эту функцию, также известную как «эффект параллакса», можно отключить на некоторых мобильных устройствах, чтобы улучшить работу страницы.

Повторяющийся фон

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

💡

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

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

Средство выбора точки фокуса

Если опция «Фиксированный фон» выключена, вы увидите средство выбора точки фокуса. Оно позволяет определить и выделить главный объект на снимке. Щёлкните средство выбора, чтобы перетащить его в нужное расположение, либо задайте положение вручную с помощью значений в процентах.

Альтернативный текст

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

Очистка медиафайлов

Чтобы очистить обложку и использовать сплошной цветной фон, нажмите «Очистить медиафайлы», как указано ниже:

Цвет наложения

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

Непрозрачность

Этот ползунок позволяет установить уровень непрозрачности наложения для изображения обложки. При перемещении ползунка в сторону значения 100 наложение становится более тёмным и непрозрачным, а при перемещении в сторону значения 0 ― более светлым и прозрачным. При значении непрозрачности 100 наложение становится полностью непрозрачным, а изображение обложки — невидимым. При значении непрозрачности 0 наложение полностью исчезает, оставляя видимым только изображение.

💡

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

Настройки оформления

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

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

• Размер шрифта
• Семейство шрифтов
• Внешний вид
• Высота строки
• Оформление
• Регистр
• Интервалы

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

Кроме того, можно указать конкретное значение, щёлкнув значок слайдера над опциями по умолчанию (он отмечен цифрой 1 на снимке экрана ниже). Вы можете изменить единицы измерения, щёлкнув в области, отмеченной цифрой 2 на снимке экрана ниже. Можно выбрать пиксели, em или rem.

С помощью параметра Семейство шрифтов можно изменить стиль шрифта. Выберите нужный шрифт из списка в выпадающем меню.

С помощью параметра Внешний вид можно изменить стиль текста (обычный или курсив), а также его толщину — от тонкого до очень жирного.

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

Параметр Оформление содержит опции подчёркивания и перечёркивания.

С помощью параметра Регистр можно изменять регистр текста: все прописные буквы, заглавная первая буква или все буквы строчные.

Параметр Интервалы задаёт интервал между всеми знаками в тексте. Значение единицы измерения по умолчанию (пиксели) можно изменить на проценты, em, rem, vw и vh. Дополнительные сведения об относительных единицах можно найти здесь.

Размеры

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

Вы также можете добавить отступ, чтобы увеличить пространство вокруг содержимого блока «Обложка».

Видео в блоке «Обложка»

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

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

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

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

Теперь вы можете добавить любой текст или кнопки поверх видео на обложке.

Дополнительно

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

Ваша оценка:

Свойство CSS: background-size: `contain` и `cover`

Свойство CSS: background-size: `contain` и `cover`

• Глобальное использование

  95,96% + 0% «=» 95,96%

IE

1. 6–8: не поддерживается
2. 9–10: поддерживается
3. 11: поддерживается

Edge

1. 12–113: поддерживается
2. 114: поддерживается

Firefox

1. 2–3.5: не поддерживается
2. 3. 6–113: Поддерживается
3. 114: Поддерживается
4. 00% — Supported»> 115–116: Поддерживается

Chrome

1. 4–113: поддерживается
2. 114: поддерживается
3. 115–117: поддерживается

Safari

1. 3.1–4 : Не поддерживается
2. 5 — 16.4: Поддерживается
3. 16.5: Поддерживается
4. 16.6 — TP: поддерживается

Opera

1. 10 — 98: поддерживается
2. 99: поддерживается

Safari на iOS

9 0037 3.2–4.1: не поддерживается
1. 4.2–16.4: поддерживается
2. 16. 5: Поддерживается
3. 16.6–17: Поддерживается

Opera Mini

1. все: Поддержка неизвестна

Браузер Android

1. 2.1–4.4.4: Не поддерживается
2. 114: поддерживается

Opera Mobile

1. 12–12.1: не поддерживается
2. 73: поддерживается

Chrome для Android

1. 114: поддерживается

Firefox для Android

Браузер UC для Android

1. 13.4: Поддержка неизвестна

Samsung Internet

1. 18% — Supported»> 4–20: поддерживается
2. 21: поддерживается

QQ Browser

1. 13.1: поддержка неизвестна

Браузер Baidu

1. 13.18: поддержка неизвестна

KaiOS Browser

1. 2.5: поддержка неизвестна
2. 3: поддержка неизвестна

Как остановить обрезку фонового изображения на мобильных устройствах

1 Комментарий / К Джейми Марсленд / 8 мая 2023 г.

Введение

Блоки WordPress Gutenberg сделали разработку красивых и функциональных веб-страниц проще, чем когда-либо. Один популярный блок, блок «Обложка», позволяет пользователям добавлять привлекательные полноразмерные изображения и видео в качестве фона с наложенным текстом. В этой статье мы рассмотрим CSS 9.0163 background-size: настройка обложки , ее происхождение и способы предотвращения обрезки фоновых изображений на мобильных устройствах.

Происхождение

Параметр background-size: cover был представлен в спецификации CSS3, официально опубликованной в качестве рекомендации W3C 19 июня 2012 г. Это новое свойство позволило разработчикам легко управлять масштабированием фоновых изображений для соответствия различным размерам контейнеров и разрешениям экрана.

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

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

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

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

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

Используется свойство padding-top для сохранения соотношения сторон фонового изображения.

1. Добавьте пользовательский класс CSS в свой блок обложки Gutenberg, например, «custom-cover-image», как упоминалось в предыдущих ответах.
2. Затем добавьте на свой сайт следующий пользовательский CSS:

 . custom-cover-image {
    /* Удалить высоту по умолчанию, установленную блоком покрытия Гутенберга */
    минимальная высота: 0 !важно;
    высота: авто;
}
/* Сохраняем соотношение сторон фонового изображения */
.custom-cover-image::before {
    содержание: "";
    дисплей: блок;
    обивка верха: 56,25%; /* Настройте это значение в зависимости от соотношения сторон вашего изображения (например, 16:9 -> 56,25%) */
}
/* Мобильные устройства (портрет и альбом) */
Только экран @media и (максимальная ширина: 767 пикселей) {
    .custom-cover-image img.wp-block-cover__image-background {
        объект-подгонка: обложка !важно;
        положение объекта: по центру !важно;
        ширина: 100% !важно;
        высота: 100% !важно;
        положение: абсолютное;
    }
    .custom-cover-image .wp-block-cover__inner-container {
        /* Выравнивание содержимого по центру */
        выравнивание текста: по центру;
        /* Поместите внутренний контейнер поверх фонового изображения */
        положение: абсолютное;
        сверху: 0;
        слева: 0;
        ширина: 100%;
        высота: 100%;
        дисплей: гибкий;
        выравнивание элементов: по центру;
        выравнивание содержимого: по центру;
    }
}
 

Этот фрагмент кода CSS использует псевдоэлемент ::before с padding-top для сохранения соотношения сторон фонового изображения. Отрегулируйте значение padding-top в зависимости от соотношения сторон вашего изображения. Медиа-запрос гарантирует, что эти стили применяются только на небольших экранах (мобильных устройствах).

Обратите внимание, что этот обходной путь может работать не во всех случаях, так как он основан на фиксированном значении соотношения сторон. Если у вас есть несколько блоков обложки с разными соотношениями сторон фонового изображения, вам потребуется создать пользовательские классы CSS с разными padding-top значения для каждого соотношения сторон.

Заключение

Блок WordPress Gutenberg Cover в сочетании с настройкой CSS background-size: cover позволяет разработчикам создавать визуально привлекательные и динамичные веб-страницы.

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

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