Non puoi prendere un valore di colore esistente e applicare un canale alfa ad esso. Vale a dire, non puoi prendere un valore esadecimale esistente come #f0f0f0, dargli un componente alfa e usare il valore risultante con un'altra proprietà.
Tuttavia, le proprietà personalizzate consentono di convertire il valore esadecimale in una tripletta RGB da utilizzare con rgba(), archiviare quel valore nella proprietà personalizzata (comprese le virgole!), Sostituire quel valore usando var()in una rgba()funzione con il valore alfa desiderato e lo farà solo lavoro:
:root {
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
}
body {
color: #000;
background-color: #000;
}
#element {
background-color: rgba(var(--color), 0.8);
}
<p id="element">If you can see this, your browser supports custom properties.</p>
Sembra quasi troppo bello per essere vero. 1 Come funziona?
La magia sta nel fatto che i valori delle proprietà personalizzate vengono sostituiti come quando si sostituiscono i var()riferimenti in un valore di proprietà, prima che il valore di quella proprietà venga calcolato. Ciò significa che, per quanto riguarda le proprietà personalizzate, il valore di --colornel tuo esempio non è affatto un valore di colore fino a quandovar(--color) un'espressione non appare da qualche parte che si aspetta un valore di colore (e solo in quel contesto). Dalla sezione 2.1 delle specifiche delle variabili css:
La sintassi consentita per le proprietà personalizzate è estremamente permissiva. La produzione <declaration-value> corrisponde a qualsiasi sequenza di uno o più token, purché la sequenza non contenga <bad-string-token>, <bad-url-token>, senza pari <) - token>, <] - token> o <} - token> o token <semicolon-token> di livello superiore o token <delim-token> con valore "!".
Ad esempio, la seguente è una proprietà personalizzata valida:
--foo: if(x > 5) this.width = 10;
Sebbene questo valore sia ovviamente inutile come variabile, poiché non sarebbe valido in qualsiasi proprietà normale, potrebbe essere letto e applicato da JavaScript.
E sezione 3 :
Se una proprietà contiene una o più funzioni var () e tali funzioni sono sintatticamente valide, l'intera grammatica della proprietà deve essere considerata valida al momento dell'analisi. Viene verificato solo alla sintassi al momento del valore calcolato, dopo che le funzioni var () sono state sostituite.
Ciò significa che il 240, 240, 240valore che vedi sopra viene sostituito direttamente nella rgba()funzione prima che la dichiarazione venga calcolata. Così questo:
#element {
background-color: rgba(var(--color), 0.8);
}
che all'inizio non sembra essere un CSS valido perché rgba()prevede non meno di quattro valori numerici separati da virgola, diventa questo:
#element {
background-color: rgba(240, 240, 240, 0.8);
}
che, ovviamente, è un CSS perfettamente valido.
Facendo un passo ulteriore, è possibile memorizzare il componente alfa nella propria proprietà personalizzata:
:root {
--color: 240, 240, 240;
--alpha: 0.8;
}
e sostituirlo, con lo stesso risultato:
#element {
background-color: rgba(var(--color), var(--alpha));
}
Ciò consente di avere valori alfa diversi che è possibile scambiare al volo.
1 Bene, lo è, se stai eseguendo lo snippet di codice in un browser che non supporta proprietà personalizzate.