Разделение фонового цвета и непрозрачности?

Есть ли способ установить цвет bg элемента в одном месте и манипулировать его непрозрачностью где-то еще?Разделение фонового цвета и непрозрачности?

Я знаю, что это можно сделать с помощью прозрачных PNG или некоторых многоуровневых DIV, но я не могу использовать эти параметры (пожалуйста, не тратьте время, предлагая их).

CSS файл А

#menubar { 
background-color: #036564; 
}

CSS Файл B

#menubar { 
background-color-opacity: 0.5; /* idea 1 */ 
background-color: rgba(inherit, inherit, inherit, 0.5); /* idea 2 */ 
}

источник

2012-03-03 Mike

почему вы хотите отдельный цвет фона непрозрачности. Где rgba - лучшее решение когда-либо – sandeep

@sandeep: Идея здесь в том, что он задает значения RGB в одном файле и не хочет повторять их в другом файле со значением A. – BoltClock

@sandeep: эта функция желательна, если вам необходимо установить фокусную непрозрачность элементов динамически с помощью JavaScript, но не хотите иметь значения цвета в вашем JavaScript-коде (где они, безусловно, не принадлежат). – Jack

В настоящее время невозможно определить частичные цветовые компоненты и имеют остальные значения наследовать или каскад в CSS.

Если вам нужно указать цвет с альфа-значением, вам нужно будет указать его значения RGB или HSL вместе с альфа-версией, так как единственными значениями цвета, которые позволяют вам указать альфа-компонент, являются rgba() и hsla(). Вы не можете указывать альфу независимо от других компонентов цвета.

Подробнее см. На CSS3 Color Module.

источник

2012-03-03 16:33:06 BoltClock

Спасибо, я знал это, но думал, что есть какая-то магия tesla outlook;) Спасибо за исправление орфографии тоже. – Mike

Вы можете разбить два: background-color и opacity, но в этом случае opacity применяется ко всему элементу не только для цвета фона.

http://jsfiddle.net/tUHdv/

В jsfiddle Например, обратите внимание, как буквы в синем квадрате становится немного красного.

ПРИМЕЧАНИЕ: Этот ответ был добавлен, чтобы уточнить, что вы можете использовать оба свойства вместе, за исключением того, что оно влияет на более чем background-color.

источник

2013-08-26 15:25:39 Unode

спасибо, но, как вы сказали, непрозрачность распространяется на весь элемент. – Mike

Если вы используете Sass, вы можете определить переменную для цвета rgb, а затем вставить ее в цвет rgba, указав только компонент альфа-прозрачности.

$base-color: rgb(200,150,100); 

a { 
    color: rgba($base-color, .7); 
}

Найдено на https://robots.thoughtbot.com/controlling-color-with-sass-color-functions

источник

2017-09-17 11:00:25

Хотя вопрос не о «Сасс» вообще, ваш ответ здесь не в нужном месте ... В любом случае +1 от меня за то, что вы нашли время! Добро пожаловать в SO - приятно иметь вас. – Axel

Разделение фонового цвета и непрозрачности?

ответ

Смежные вопросы