¿Separación de color de fondo y opacidad?

Question

¿Hay alguna forma de establecer el color bg de un elemento en un lugar y manipular su opacidad en otro lugar?

Sé que esto se puede hacer con PNG transparentes o algunos DIV apilados, pero no puedo usar estas opciones (no pierda el tiempo sugiriéndolas).

Archivo CSS Un

#menubar { 
background-color: #036564; 
} 

CSS Archivo B

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

Answer 1

Actualmente no es posible especificar los componentes de color parciales y tienen el resto de los valores de heredar o en cascada en el CSS.

Si necesita especificar un color con un valor alfa, deberá proporcionar sus valores RGB o HSL junto con el alfa, ya que los únicos valores de color que le permiten especificar un componente alfa son rgba() y hsla(). No puede especificar el alfa independientemente de los otros componentes de color.

Consulte el CSS3 Color Module para obtener más información.

Answer 2

En realidad, puede dividir los dos: background-color y opacity, pero en este caso opacity se aplica a todo el elemento, no solo al color de fondo.

http://jsfiddle.net/tUHdv/

En el ejemplo jsFiddle, observe cómo las letras en cuadrado azul vuelven ligeramente rojo.

NOTA: Esta respuesta se agregó para aclarar que puede usar ambas propiedades juntas, excepto que afecta más que background-color.

Answer 3

Si usa Sass puede definir una variable para el color rgb, y luego insertarla en un color rgba, especificando solo el componente de transparencia alfa.

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

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

conocer en https://robots.thoughtbot.com/controlling-color-with-sass-color-functions