Изменить непрозрачность переменных :root CSS RGB

Я кодирую много цветовых переменных :root CSS, например:

    --gray: rgb(142,142,147);
    --gray-2: rgb(174,174,178);
    --gray-3: rgb(199,199,204);
    --gray-4: rgb(209,209,214);
    --gray-5: rgb(229,229,234);
    --gray-6: rgb(242,242,247);

    --gray-c: rgb(142,142,147);
    --gray-c2: rgb(99,99,102);
    --gray-c3: rgb(72,72,74);
    --gray-c4: rgb(58,58,60);
    --gray-c5: rgb(44,44,46);
    --gray-c6: rgb(28,28,30);

Теперь мне нужно изменить непрозрачность этих цветов. В то время я не думал об изменении непрозрачности или манипулировании этими цветами. В проекте используется SCSS, поэтому я думал, что возможность сделать что-то вроде background: rgba(var(--gray-5), 0.5) будет возможно, но, увы, это не так. Каков наилучший способ приблизиться к этому?

css sass scss-mixins

17.07.2019 19:28

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

218

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я стараюсь сделать все возможное, чтобы помочь вам! Этот формат должен работать для вас:

:root {
  --unvisited-color: #595144;
     --r: 174;
     --g: 147;
     --b: 118;

     --rgb: rgba(var(--r), var(--g), var(--b)/*, var(--o)*/);
  --th-color: var(--rgb); }

Вы можете добавить непрозрачность или фильтр следующим образом:

opacity: 0.2;
filter: alpha(opacity=20

Надеюсь, это поможет вам, это пример.

17.07.2019 19:43

Ответ принят как подходящий

вы можете создать переменную только без использования rgb, используя значения, разделенные ,

:root {
--gray: 142,142,147;
}

body {
background: rgba(var(--gray), 0.5);
/*background: rgba(var(--gray), 0,5);*/
}

17.07.2019 19:55

Другие вопросы по теме

Создание размера заголовков с помощью рекурсивной функции в SASS

Проблема с вложенными @each и вложенными списками

Показать все, кроме последнего дочернего диапазона на карте

Что это за странный синтаксис свойства SASS?

Использование запросов @media для разных размеров экрана не работает должным образом

Синтаксис БЭМ в SASS

Есть ли способ добавить темный режим в мое приложение с помощью SCSS?

Прилипание положения работает в Firefox, не работает в Chrome

Как умножить процент на арифметическое выражение

Как изменить шрифт и форматирование ионного диапазона Ionic 4?

Изменить непрозрачность переменных :root CSS RGB

Ответы 2

Другие вопросы по теме

Похожие вопросы