Pregunta ¿Es posible cambiar solo el alfa de un color de fondo rgba en el vuelo estacionario?


Tengo un juego de <a> etiquetas con diferentes colores de fondo rgba pero la misma alfa. ¿Es posible escribir un estilo CSS único que cambie solo la opacidad del atributo rgba?

Un ejemplo rápido del código:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a> 

Y los estilos

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

Lo que me gustaría hacer es escribir un único estilo que cambiaría la opacidad cuando <a> está sobrevolado, pero mantiene el color sin cambios.

Algo como

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

76
2017-08-05 20:45


origen


Respuestas:


Esto ahora es posible con propiedades personalizadas:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

Para entender cómo funciona esto, ver ¿Cómo aplico la opacidad a una variable de color CSS?

Si las propiedades personalizadas no son una opción, consulte la respuesta original a continuación.


Lamentablemente, no, tendrá que especificar los valores rojo, verde y azul nuevamente para cada clase individual:

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

Solo puedes usar el inherit palabra clave solo como un valor para la propiedad, e incluso entonces el uso de inherit no es apropiado aquí.


36
2017-08-05 20:52



No, no es posible.

Podrías probar un Pre-procesador CSS, sin embargo, si quieres hacer este tipo de cosas.

Por lo que pude ver, al menos MENOS y Hablar con descaro a tienen funciones que pueden hacer que los colores sean más o menos transparentes.


12
2017-08-05 21:03



Podrías hacer varias cosas para evitar tener que codificar los números si quieres. Algunos de estos métodos solo funcionan si usa un fondo blanco normal, ya que realmente están agregando blanco en la parte superior en lugar de reducir la opacidad. El primero debería funcionar bien para todo lo proporcionado:

  • usted no está usando el elemento psuedo para algo; y
  • puedes establecer position a relativa o absoluta en el <div> etiqueta

Opción 1: ::before psuedo-element:

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

Opción 2: superposición gif blanco:

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

Opción 3: box-shadow método:

Una variación del método gif, pero puede tener problemas de rendimiento.

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

Ejemplos de CodePen: http://codepen.io/chrisboon27/pen/ACdka


10
2018-06-04 05:05



No, eso no es posible.

Si quieres usar rgba, debes establecer cada valor juntos. No hay forma de cambiar solo el alfa.


5
2017-08-05 20:52



Ahora es 2017 y esto ahora es posible con

Propiedades personalizadas CSS / Variables CSS (Puedo usar)

Un caso de uso clásico para las variables CSS es la capacidad de individualizar partes del valor de una propiedad.

Así que aquí, en lugar de repetir toda la expresión de rgba una vez más: nos separamos o 'individualizamos' el rgba valores en 2 partes / variables (uno para el valor de rgb y otro para el alfa)

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

Luego, al pasar el cursor, ahora podemos modificar la variable --alpha:

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}
<a href="#">
  <div class="brown">Link 1</div>
</a>
<a href="#">
  <div class="green">Link 2</div>
</a>

Codepen

Otras lecturas:

Individualización de propiedades CSS con variables CSS (Dan Wilson)


5
2017-08-02 14:25



Por qué no usar :hover y especifica una opacidad diferente en la clase de vuelo estacionario?

a:hover {
     opacity:0.6
}

2
2017-08-05 20:51



Tuve un problema similar. Tenía 18 divs diferentes que funcionaban como botones, y cada uno con un color diferente. En lugar de descubrir los códigos de color para cada uno o usar un selector div: hover para cambiar la opacidad (que afecta a todos los niños) utilicé la pseudoclase: antes como en la respuesta de @Chris Boon.

Como quería colorear los elementos individuales, utilicé: antes para crear un div blanco transparente on: hover. Este es un lavado muy básico.

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

Según CanIUse.com, esto debería tener algo así como un 92% de apoyo a principios de 2014. (http://caniuse.com/#feat=css-gencontent)


2
2018-01-31 17:09