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

opacidad imagen de fondo css

Question

Estoy diseñando una aplicación en electrón, así que tengo acceso a las variables 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 haría para hacer esto? No estoy usando ningún preprocesador, solo CSS. Preferiría una respuesta totalmente CSS, pero aceptaré JavaScript / jQuery.

No puedo usar la opacity porque estoy usando una imagen de fondo que no debería ser transparente.

Answer 1

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

: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;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

Answer 2

En CSS, debería poder usar los valores rgba:

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

o simplemente establece la opacidad:

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

Answer 3

Estaba en una situación similar, pero desafortunadamente las soluciones dadas no funcionaron para mí, ya que las variables podían ser desde rgb a hsl a hex o incluso nombres de colores.
Resolví este problema ahora, aplicando el background-color y la opacity a un elemento pseudo :after :

.container {
    position: relative;
}

.container:after {
    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 debe 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.

Answer 4

No puede tomar un valor de color existente y aplicarle un canal alfa. Es decir, no puede tomar un valor hexadecimal existente como #f0f0f0 , asignarle 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);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

Esto parece casi demasiado bueno para ser verdad. ¹ ¿Cómo funciona?

La magia radica en el hecho de que los valores de las propiedades personalizadas se sustituyen tal cual cuando se reemplazan las referencias var() en un valor de propiedad, antes de que se calcule 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 aparezca una expresión var(--color) algún lugar que espere 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. La producción <declaration-value> coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga <bad-string-token>, <bad-url-token>, unmatched <) - token>, <] - token>, o <} - token>, o tokens <semicolon-token> de nivel superior o tokens <delim-token> 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 sería invá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 tiempo de valor calculado, después de que se hayan sustituido las funciones var ().

Esto significa que el valor 240, 240, 240 que ve arriba se sustituye directamente en la función rgba() antes de calcular la declaración. Así que esto:

#element {
  background-color: rgba(var(--color), 0.5);
}

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.5);
}

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.5;
}

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.

¹ _{Bueno, lo es, si está ejecutando el fragmento de código en un navegador que no admite propiedades personalizadas.}

Answer 5

Para usar rgba () con la variable css general, intente esto:

1. Declare su color en el interior: root, pero no use rgb () como lo hacen otras respuestas. solo escribe el valor

:root {
--color: #F00;
}

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

2. Use la variable --color usando var () como otras respuestas

#some-element { color : rgba(var(--color),0.5); }

Answer 6

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);
}

<div id="a1">asdf</div>
<div id="a2">asdf</div>

Si no puede usar esto y está de acuerdo con la solución de JavaScript, puede usar esta:

$(function() {
  $(''button'').click(function() {
    bgcolor = $(''#a2'').css(''backgroundColor'');
    rgb_value = bgcolor.match(//d+,/s?/d+,/s?/d+/)[0]
    $(''#a2'').css(''backgroundColor'', ''rgba('' + rgb_value + '', 0.5)'');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

Answer 7

Sé que el OP no está utilizando un preprocesador, pero me habría ayudado si la siguiente información fuera parte de la respuesta aquí (no puedo comentar todavía, 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 css nativas, por lo que puede usar la interpolación de cadenas 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)''};
}

<div></div>

Tenga en cuenta que la interpolación de cadenas 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 válido scss, por lo que no recibiría ningún error en la compilación.

Answer 8

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

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

Answer 9

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

donde reemplazas la opacidad con cualquier cosa entre 0 y 1