Css фон блока: background-image | htmlbook.ru

Расширенные фоны — Документация

Эта функция доступна только в нашей профессиональной версии.

Дополнительные фоны аналогичны нашей функции «Эффекты», но они обрабатывают фоновые изображения и градиенты для блока «Контейнер».

Есть несколько преимуществ использования Advanced Backgrounds по сравнению со стандартными функциями фонового изображения/градиента.

1. Вы можете определить разные фоновые изображения/градиенты для разных устройств.
2. Вы можете определить их для нормального состояния или состояния наведения.
3. Вы можете добавить несколько фоновых изображений/градиентов к одному и тому же элементу, если они имеют разные цели (самостоятельный и псевдоэлемент).

Когда одна из этих функций необходима, вы можете включить функцию «Дополнительные фоны» на панели «Фоны» блока «Контейнер».

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

Теперь, когда мы щелкнем значок гаечного ключа, вы увидите панель, подобную этой.

Кнопка «Закрыть» закроет всплывающее окно и сохранит все сделанные нами изменения.

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

Теперь мы можем выбирать между типом фона Изображение или Градиент. Во-первых, давайте рассмотрим несколько вариантов, которые одинаковы для обоих типов.

Устройство

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

• Все
• Рабочий стол
• Планшет
• Планшет + мобильный телефон
• Мобильный

Состояние

).

• Обычный — применить к блоку, как он есть на странице, без взаимодействия
• Наведение — применить к блоку, когда текущий блок наведен

Цель

Здесь мы можем выбрать одну из двух целей.

Self

Применяет фон к самому элементу Container. Это стандартно, но не позволяет применять эффекты или переходы к фону.

Псевдоэлемент

Добавляет фон как отдельный элемент внутрь Контейнера. Тип изображения установлен на псевдоселектор :before , а тип градиента установлен на псевдоселектор :after .

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

Добавление нескольких фонов

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

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

• Устройство: Все
• Состояние: Обычное
• Цель: Сам

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

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

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

Тип фона изображения имеет в основном те же параметры, что и наши функции фонового изображения по умолчанию для блока Контейнер. Единственное отличие состоит в том, что у него нет функции «Непрозрачность», так как вместо этого вы должны использовать функцию «Непрозрачность и смешивание» на панели «Эффекты» (это намного лучше!).

URL-адрес изображения

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

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

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

Размер

Параметр размера относится к свойству background-size .

Дальнейшее чтение: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Position

Параметр position относится к свойству background-position .

Дальнейшее чтение: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Повтор

Параметр повтора относится к свойству background-repeat .

Дальнейшее чтение: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Вложение

Параметр вложения относится к фоновому вложению собственность.

Дальнейшее чтение: https://developer. mozilla.org/en-US/docs/Web/CSS/background-attachment

Градиент фона

Градиент фона имеет те же параметры, что и наш стандартный параметр Градиент.

Этот параметр использует свойство linear-gradient background-image. Вы можете узнать больше об этом здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()

Direction

Это направление линейного градиента, от 0 до 360 градусов.

Color One

Первый цвет градиента.

Первая остановка

Там, где в Контейнере останавливается первый цвет.

Color Two

Второй цвет градиента.

Стоп Два

Там, где второй цвет останавливается в Контейнере.

Используйте стильный фон CSS или SVG непосредственно в редакторе WordPress. Я покажу вам, как использовать стильный фон CSS с расширенными блоками Kadence. Без какого-либо дополнительного конструктора страниц или плагинов.

С изображениями CSS и SVG можно использовать отличные эффекты в качестве фона для разделов или всего веб-сайта WordPress, экономя ресурсы и пространство. С помощью блока макета строки от Kadence Blocks нужный код добавляется в раздел «Пользовательский CSS» и сразу же отображается.

Узнайте, как поддерживать SVG в WordPress.

Что вам нужно

Для реализации этого туториала вам не нужны никакие платные плагины или услуги, а только

• собственный блог WordPress
• бесплатный плагин Kadence Blocks
• Графика CSS или SVG для фона

Хотя я использую тему Kadence, она также работает со всеми остальными.

Инструменты и генераторы SVG

Прежде всего, вам нужен крутой фон. В сети их обычно называют паттернами.

Для этого я захожу на один из следующих четырех веб-сайтов, чтобы создать что-то подходящее:

• https://www.snoweb-svg.com/en/
• https://www.magicpattern.design/
• https://app.haikei.app/
• https://bgjar.com/

Конечно, есть сотни других замечательных генераторов, но это мои 4 любимых.

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

Вы можете использовать мой собственный конвертер фона SVG в CSS.

Инструкции: Используйте SVG в качестве фона блока0217 функция блоков Kadence.

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

Я предполагаю, что у вас есть работающий блог WordPress с установленными блоками Kadence.

1. Создать блок макета строки

Блок вставки макета строки

Сначала вы создаете новый блок макета строки.

Самый быстрый способ сделать это — использовать ярлык «/ro », который вы вводите в новой строке в редакторе Гутенберга. Смотрите скриншот справа.

Какой макет вы выберете, зависит только от вас — в зависимости от того, что вы хотите спроектировать.

Для примера здесь я выбираю две колонки с разделением 66/33.

В настоящее время в моем редакторе это выглядит так:

Скриншот: Блок макета строки с двумя столбцами

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

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

2 шага:

Я предоставил макет строки с содержимым.

Элемент завершен. Не хватает только фона с графикой SVG.

2. Создайте графику SVG

Сохраните фон как графику SVG.

Теперь вы переходите к одному из вышеперечисленных генераторов SVG. В примере я использовал «Круговой разброс» с https://app.haikei.app/.

Откройте файл SVG в редакторе.

Если вы нашли подходящий фон, сохраните его как графику SVG.

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

Откройте конвертер SVG в CSS и вставьте ранее скопированный код SVG в левом верхнем углу.

В ту же секунду вы увидите в поле ниже готовый CSS-код для вашего сайта. Скопируйте его в буфер обмена.

Инструмент SVG to CSS в действии

3.

Вставьте фон CSS в WordPress

На третьем и последнем шаге вам нужно вставить фон CSS в редактор WordPress.

Теперь отметьте ранее созданный макет строки , перейдите вниз в правом меню и разверните пункт «Пользовательский CSS».

Теперь внутри «селектора { » и изогнутых скобок вы вставляете свой фон CSS. Сразу же появляется новый фон!

Вот мой живой пример. Я только что добавил кнопку:

Ускорьте свой сайт с помощью WP Rocket

Превратите свой сайт в ракету с помощью самого мощного плагина кэширования, признанного экспертами WordPress.

Попробуйте WP Rocket

Готов мой блок Гутенберга с фоном CSS!

Заключение Фон CSS

Редактор Gutenberg сильно вырос за последние годы. Также выросли расширения, такие как блоки Kadence.

Наконец, можно хранить код CSS непосредственно в редакторе и для очень конкретного блока.

Спасибо пользовательский CSS.

Чуть позже посмотрите мой пост о лучших плагинах Gutenberg Block.