¿Cómo aplico la opacidad a una variable de color CSS?

Estoy diseñando una aplicación en electrónica, por lo que tengo acceso a las variables de CSS. He definido una variable de color en vars.css :

 :root { --color: #f0f0f0; } 

Quiero usar este color en main.css , pero con cierta opacidad aplicada:

 #element { background: (somehow use var(--color) at some opacity); } 

¿Cómo voy a hacer esto? No estoy usando ningún preprocesador, solo CSS. Preferiría una respuesta de todo CSS, pero aceptaré JavaScript / jQuery.

No puedo usar opacity porque estoy usando una imagen de fondo que no debe ser transparente.

No puede tomar un valor de color existente y aplicarle un canal alfa. A saber, no puede tomar un valor hexadecimal existente como #f0f0f0 , darle un componente alfa y usar 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() , almacenar ese valor en la propiedad personalizada (¡incluidas las comas!), Sustituir ese valor usando var() en una función rgba() 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.5); } 
 

If you can see this, your browser supports custom properties.

Sé que el OP no está utilizando un preprocesador, pero me han ayudado si la siguiente información era parte de la respuesta aquí (no puedo comentar todavía, de lo contrario habría comentado @BoltClock answer.

Si está utilizando, por ejemplo, scss, la respuesta anterior fallará, porque scss intenta comstackr 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 css nativas, por lo que puede utilizar la interpolación de cadenas para eludir 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 comstacktion */ 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)'}; } 
 

Esto es de hecho posible con CSS . Está un poco sucio y tendrás que usar degradados. He codificado un pequeño fragmento como ejemplo, tenga en cuenta que para fondos oscuros, debe usar la opacidad negra, como para la luz, los blancos .:

 :root { --red: rgba(255, 0, 0, 1); --white-low-opacity: rgba(255, 255, 255, .3); --white-high-opacity: rgba(255, 255, 255, .7); --black-low-opacity: rgba(0, 0, 0, .3); --black-high-opacity: rgba(0, 0, 0, .7); } div { width: 100px; height: 100px; margin: 10px; } .element1 { background: linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element2 { background: linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element3 { background: linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element4 { background: linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } 
 
hello world
hello world
hello world
hello world

En CSS, debes poder utilizar los valores de rgba:

 #element { background: rgba(240, 240, 240, 0.5); } 

o simplemente establece la opacidad:

 #element { background: #f0f0f0; opacity: 0.5; } 

Puede establecer una variable / valor específico para cada color, el original y el que tiene opacidad:

 :root { --color: #F00; --color-opacity: rgba(255, 0, 0, 0.5); } #a1 { background: var(--color); } #a2 { background: var(--color-opacity); } 
 
asdf
asdf
 :root{ --color: 255, 0, 0; } #element{ background-color: rgba(var(--color), opacity); } 

donde reemplazas la opacidad con cualquier cosa entre 0 y 1

Si te gustan los colores hexadecimales como yo, hay otra solución. El valor hexadecimal es de 6 dígitos después de que ese sea el valor alfa. 00 es 100% de transparencia 99 es aproximadamente 75% luego usa el alfabeto ‘a1-af’ luego ‘b1-bf’ que termina con ‘ff’ que es 100% opaco.

 :root { --color: #F00; } #element { background: var(--color)f6; } 

Usando scss puedes hacer:

 rgba(color($colors, colorVar), 0.5);