Separazione colore di sfondo e opacità?

Question

C'è un modo per impostare il colore bg di un elemento in un punto e manipolarne l'opacità da qualche altra parte?

So che questo può essere fatto con PNG trasparenti o alcuni DIV impilati, ma non posso usare queste opzioni (per favore non perdere tempo a suggerirle).

CSS file Un

#menubar { 
background-color: #036564; 
} 

CSS File B

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

Answer 1

Al momento non è possibile specificare componenti di colore parziali e avere il resto dei valori ereditano o in cascata nei CSS.

Se è necessario specificare un colore con un valore alfa, dovrete fornire i suoi valori RGB o HSL insieme con l'alfa, come gli unici valori di colore che consentono di specificare un componente alfa sono rgba() e hsla(). Non è possibile specificare l'alfa indipendentemente dagli altri componenti del colore.

Vedere CSS3 Color Module per dettagli.

Answer 2

In realtà è possibile dividere i due: background-color e opacity, ma in questo caso opacity viene applicato all'intero elemento e non solo al colore di sfondo.

http://jsfiddle.net/tUHdv/

Nell'esempio jsfiddle, notare come le lettere quadrato blu diventano un po 'rosso.

NOTA: Questa risposta è stata aggiunta per chiarire che è possibile utilizzare entrambe le proprietà insieme, tranne che colpisce più del background-color.

Answer 3

Se si utilizza Sass è possibile definire una variabile per il colore rgb e quindi inserirla in un colore rgba, specificando solo il componente di trasparenza alfa.

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

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

Trovato su https://robots.thoughtbot.com/controlling-color-with-sass-color-functions