Обрезка фона

background-clip
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно управлять отображением фона под границами блока.

Классы

Класс Значение
bg-clip-border background-clip: border-box;
bg-clip-padding background-clip: padding-box;
bg-clip-content background-clip: content-box;
bg-clip-text background-clip: text;

Описание

Адаптивный модификатор. Управляет отображением фона под границами блока в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • bg-clip-border - фон распространяется до внешнего края границы (но под границей в z-порядке);
    • bg-clip-padding - фон распространяется до внешнего края отступа. Под границей фон не рисуется.;
    • bg-clip-content - фон закрашивается внутри (обрезается) поля содержимого.;
    • bg-clip-text - фон закрашивается внутри (обрезается) текста переднего плана.;

bg-clip-border

С помощью модификатора bg-clip-border фон распространяется до внешнего края границы (но под границей в z-порядке).

bg-clip-border 
<div class="bg-clip-border p-3 radius-1/3 bg-primary border-4 border-danger-default border-dashed bold color-on-surface-inverse flex items-cross-center content-main-center">
    <span class="p-top-1/2 p-bottom-1/2">bg-clip-border</span>
</div>

bg-clip-padding

С помощью модификатора bg-clip-padding фон распространяется до внешнего края отступа. Под границей фон не рисуется..

bg-clip-padding 
<div class="bg-clip-padding p-3 radius-1/3 bg-primary border-4 border-danger-default border-dashed bold color-on-surface-inverse flex items-cross-center content-main-center">
    <span class="p-top-1/2 p-bottom-1/2">bg-clip-padding</span>
</div>

bg-clip-content

С помощью модификатора bg-clip-content фон закрашивается внутри (обрезается) поля содержимого..

bg-clip-content 
<div class="bg-clip-content p-3 radius-1/3 bg-primary border-4 border-danger-default border-dashed bold color-on-surface-inverse flex items-cross-center content-main-center">
    <span class="p-top-1/2 p-bottom-1/2">bg-clip-content</span>
</div>

bg-clip-text

С помощью модификатора bg-clip-text фон закрашивается внутри (обрезается) текста переднего плана..

Hello world 
<div class="t-center text-9 bold">
    <span class="bg-clip-text color-transparent gr-line-2 gr-to-right gr1-red-5 gr2-purple-5">
        Hello world
    </span>
</div>

Адаптивность

Для управления поведения фонового изображения при прокрутке, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору выравнивания элементов флексбокса по основной оси.

Например, используйте модификатор md:bg-fixed для фиксации фонового изображения относительно области просмотра для экранов размером Medium и больше.

<div class="md:bg-fixed"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью