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

Question

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

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

CSS-файл A

#menubar {
background-color: #036564;
}

CSS-файл B

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

Answer 1

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

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

Подробнее см. Цветовой модуль CSS3 .

Answer 2

Если вы используете 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

Answer 3

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

http://jsfiddle.net/tUHdv/

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

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