Использование CSS остановит изображение, прежде чем оно закроет все модули

Question

Я использую тему divi wordpress и пытаюсь создать фоновое изображение только для центральных 4 столбцов подряд

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

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

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

    background-image: url('https://technologyforthefuture.org/wp-content/uploads/2019/02/founder-statement-bg.jpg');
    background-position: 300px;

. Я хочу получить сводку (глядя на изображение выше), как настроить изображение так, чтобы оно начиналось со второго модуля, который я хочучтобы, в свою очередь, завершить образ после 5-го модуля (где указано «Следующее событие»)

Answer 1

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

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

Answer 2

Похоже, вы ищете clip-path или background-clip .