Прозрачность фона
background-opacity
sm
md
lg
xl
В SIMAI Framework доступны 10 уровней прозрачности для фона.
Классы
| Класс | Значение |
|---|---|
bg-opacity-0 |
--sf-bg--alfa: 0; |
bg-opacity-1 |
--sf-bg--alfa: 0.1; |
bg-opacity-2 |
--sf-bg--alfa: 0.2; |
bg-opacity-3 |
--sf-bg--alfa: 0.3; |
bg-opacity-4 |
--sf-bg--alfa: 0.4; |
bg-opacity-5 |
--sf-bg--alfa: 0.5; |
bg-opacity-6 |
--sf-bg--alfa: 0.6; |
bg-opacity-7 |
--sf-bg--alfa: 0.7; |
bg-opacity-8 |
--sf-bg--alfa: 0.8; |
bg-opacity-9 |
--sf-bg--alfa: 0.9; |
bg-opacity-full |
--sf-bg--alfa: full; |
Описание
Адаптивный модификатор. Изменяет прозрачность фона в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Принимает значения от
bg-opacity-0доbg-opacity-9.
Пример
Для того чтобы модификатор прозрачности фона работал, вместе с модификатором прозрачности нужно использовать модификатор цвета фона, например color-black bg-opacity-2
bg-opacity-0
bg-opacity-1
bg-opacity-2
bg-opacity-3
bg-opacity-4
bg-opacity-5
bg-opacity-6
bg-opacity-7
bg-opacity-8
bg-opacity-9
bg-opacity-full
<div class="bg-opacity-0 ... "></div>
<div class="bg-opacity-1 ... "></div>
<div class="bg-opacity-2 ... "></div>
<div class="bg-opacity-3 ... "></div>
<div class="bg-opacity-4 ... "></div>
<div class="bg-opacity-5 ... "></div>
<div class="bg-opacity-6 ... "></div>
<div class="bg-opacity-7 ... "></div>
<div class="bg-opacity-8 ... "></div>
<div class="bg-opacity-9 ... "></div>
<div class="bg-opacity-full ... "></div>
Адаптивность
Для установки прозрачности фона, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:bg-opacity-5 для установки полупрозрачности текста для экранов размером Medium и больше.
<div class="md:bg-opacity-5 bg-black"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.