Est-il possible de changer uniquement l'alpha d'une couleur d'arrière-plan rgba en survol?

Question

J'ai un ensemble de <a> tags avec différentes rgba couleurs d'arrière-plan, mais le même alpha. Est-il possible de n'écrire qu'un seul style css qui va changer seulement l'opacité de la rgba attribut?

Un rapide exemple de code:

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

Et les styles

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

Ce que je voudrais faire est d'écrire un seul style qui allait changer l'opacité lorsque l' <a> survole, tout en gardant la couleur inchangée.

Quelque chose comme

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

Answer 1

Malheureusement, non, vous devrez spécifier à nouveau les valeurs rouge, verte et bleue pour chaque classe:

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

Vous pouvez uniquement utiliser le mot clé inherit seul comme valeur pour la propriété. Même dans ce cas, l'utilisation de inherit n'est pas appropriée ici.

Answer 2

Vous pourriez faire des choses différentes pour éviter d'avoir à coder en dur les numéros si vous le souhaitez. Certaines de ces méthodes ne fonctionne que si vous utilisez un fond blanc comme ils sont vraiment l'ajout de blanc sur le dessus plutôt que de réduire l'opacité, mais le premier doit fonctionner correctement pour tout (tant que vous ne l'êtes pas déjà en utilisant le pseudo-élément pour quelque chose, et vous pouvez définir la position relative ou absolue sur la div). Option 1: ::avant le pseudo-élément:

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

Option 2: blanc gif de superposition:

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

Option 3: Box-shadow méthode (variation sur le gif de la méthode peut améliorer les performances de l'émission):

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

codepen exemples: http://codepen.io/chrisboon27/pen/ACdka

Answer 3

Non, il n'est pas possible.

Vous pouvez essayer un CSS pré-processeur, bien que, si vous voulez faire ce genre de chose.

De ce que j'ai pu voir, au moins MOINS et Sass ont des fonctions qui peuvent rendre des couleurs plus ou moins transparent.

Answer 4

Non, ce n'est pas possible

Si vous souhaitez utiliser rgba , vous devez définir chaque valeur ensemble. Il n'y a aucun moyen de changer uniquement l'alpha.

Answer 5

Mise à jour: Malheureusement, ce n'est pas possible. Vous devrez écrire deux sélecteurs distincts de:

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

Selon le W3C, la propriété rgba n'a pas / prend en charge la valeur inherit .