Esta sección ha sido aprobado por expertos para que tengas la seguridad de la exactitud de esta crónica.
Solución:
No puede tomar un valor de color existente y aplicarle un canal alfa. Es decir, no puede tomar un valor hexadecimal existente como #f0f0f0, dale un componente alfa y usa el valor resultante con otra propiedad.
Sin embargo, las propiedades personalizadas le permiten convertir su valor hexadecimal en un triplete RGB para usar con rgba(), almacene ese valor en la propiedad personalizada (¡incluidas las comas!), sustituya ese valor usando var() en una rgba() funciona con su valor alfa deseado, y simplemente funcionará:
:root
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
body
color: #000;
background-color: #000;
#element
background-color: rgba(var(--color), 0.8);
If you can see this, your browser supports custom properties.
Esto parece casi demasiado bueno para ser true.1 ¿Como funciona?
La magia radica en el hecho de que los valores de las propiedades personalizadas se sustituyen como es al reemplazar var() referencias en un valor de propiedad, antes de se calcula el valor de esa propiedad. Esto significa que en lo que respecta a las propiedades personalizadas, el valor de --color en su ejemplo no es un valor de color en absoluto Hasta que a var(--color) La expresión aparece en algún lugar que espera un valor de color (y solo en ese contexto). De la sección 2.1 de la especificación de variables css:
La sintaxis permitida para las propiedades personalizadas es extremadamente permisiva. los
La producción coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga , , incomparable <)-token>, <]-token>, o <}-token>o de nivel superior tokens o tokens con un valor de “!”.
Por ejemplo, la siguiente es una propiedad personalizada válida:
--foo: if(x > 5) this.width = 10;Si bien este valor es obviamente inútil como variable, ya que no sería válido en cualquier propiedad normal, JavaScript podría leerlo y actuar sobre él.
Y sección 3:
Si una propiedad contiene una o más funciones var (), y esas funciones son sintácticamente válidas, se debe suponer que la gramática de toda la propiedad es válida en el momento del análisis. Solo se verifica la sintaxis en el momento del valor calculado, después de que se hayan sustituido las funciones var ().
Esto significa que el 240, 240, 240 El valor que ve arriba se sustituye directamente en el rgba() función antes de se calcula la declaración. Así que esto:
#element
background-color: rgba(var(--color), 0.8);
que no parece ser CSS válido al principio porque rgba() espera no menos de cuatro valores numéricos separados por comas, se convierte en esto:
#element
background-color: rgba(240, 240, 240, 0.8);
que, por supuesto, es CSS perfectamente válido.
Yendo un paso más allá, puede almacenar el componente alfa en su propia propiedad personalizada:
:root
--color: 240, 240, 240;
--alpha: 0.8;
y sustituirlo, con el mismo resultado:
#element
background-color: rgba(var(--color), var(--alpha));
Esto le permite tener diferentes valores alfa que puede intercambiar sobre la marcha.
1Bueno, lo es, si está ejecutando el fragmento de código en un navegador que no admite propiedades personalizadas.
Sé que el OP no está usando un preprocesador, pero me habría ayudado si la siguiente información fuera parte de la respuesta aquí (todavía no puedo comentar, de lo contrario habría comentado la respuesta de @BoltClock.
Si está utilizando, por ejemplo, scss, la respuesta anterior fallará, porque scss intenta compilar los estilos con una función rgba () / hsla () específica de scss, que requiere 4 parámetros. Sin embargo, rgba () / hsla () también son funciones nativas de CSS, por lo que puede usar string interpolación para omitir la función scss.
Ejemplo (válido en sass 3.5.0+):
:root
--color_rgb: 250, 250, 250;
--color_hsl: 250, 50%, 50%;
div
/* This is valid CSS, but will fail in a scss compilation */
background-color: rgba(var(--color_rgb), 0.5);
/* This is valid scss, and will generate the CSS above */
background-color: #'rgba(var(--color_rgb), 0.5)';
Tenga en cuenta que string la interpolación no funcionará para funciones scss que no sean CSS, como lighten(), porque el código resultante no sería CSS funcional. Sin embargo, seguiría siendo scss válido, por lo que no recibiría ningún error en la compilación.
Estaba en una situación similar, pero desafortunadamente las soluciones dadas no funcionaron para mí, ya que las variables podrían ser cualquier cosa, desde rgb para hsl para hex o incluso nombres de colores.
Resolví este problema ahora, aplicando el background-color y el opacity a un pseudo :after o :before elemento:
.container
position: relative;
.container::before
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: var(--color);
opacity: 0.3;
Es posible que sea necesario cambiar un poco los estilos, según el elemento al que se deba aplicar el fondo.
Además, es posible que no funcione para todas las situaciones, pero es de esperar que ayude en algunos casos, donde las otras soluciones no se pueden usar.
Editar:
Acabo de notar que esta solución obviamente también afecta el color del texto, ya que crea un elemento frente al elemento de destino y le aplica un color de fondo transparente.
Esto puede ser un problema en algunos casos.
Comentarios y puntuaciones
Recuerda que tienes la capacidad de esclarecer .