Как изменить прозрачность для background-color?
Добрый день, подскажите пожалуйста, есть переменная
--system-colors-bg-selected: rgba(64, 126, 201, 1)
background: var(--system-colors-bg-selected);
где в rgba прозрачность 1
по проекту очень много мест, где эта прозрачность иная.
Как можно менять эту самую прозрачность динамически
аля я пишу
background: var(--system-colors-bg-selected);
и как-то динамически меняю эту единицу на 0.3 например
что бы если в проекте эта переменная изменилась, то не пришлось руками ходить и измнять цвета, которые я позадавал таким образом rgba(64, 126, 201, 0.3)
Дополнительно:
посмотрите здесь:
https://stackoverflow.com/questions/40010597/how-d...
Как вариант - использование переменной:
$color-base: 64, 126, 201; .element { background-color: rgba($color-base, 1); } .element-transparent { background-color: rgba($color-base, 0.3); } |
$color-base: 64, 126, 201; .element { background-color: rgba($color-base, 1); } .element-transparent { background-color: rgba($color-base, 0.3); }
Чуть сложнее:
$color-base: 64, 126, 201; $alpha-1: 1; $alpha-2: 0.3; .element { background-color: rgba($color-base, $alpha-1); } .element-transparent { background-color: rgba($color-base, $alpha-2); } |
$color-base: 64, 126, 201; $alpha-1: 1; $alpha-2: 0.3; .element { background-color: rgba($color-base, $alpha-1); } .element-transparent { background-color: rgba($color-base, $alpha-2); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения прозрачности фона (background-color) в CSS можно использовать свойство opacity или rgba цветовую модель.
1. Используя opacity:
```html
.element { background-color: #000; /* Цвет фона */ opacity: 0.5; /* Прозрачность (от 0 до 1) */ }
```
2. Используя rgba:
```html
.element { background-color: rgba(0, 0, 0, 0.5); /* Цвет фона с прозрачностью (от 0 до 1) */ }
```
Разница между ними заключается в том, что opacity также влияет на прозрачность текста и других элементов внутри выбранного элемента, в то время как rgba применяется только к фону.
Выберите подход, который лучше подходит для вашего случая. Не забудьте заменить .element на соответствующий селектор вашего элемента.