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

J'ai un ensemble de <a>balises avec des couleurs d'arrière-plan rgba différentes mais le même alpha. Est-il possible d'écrire un seul style css qui ne changera que l'opacité de l'attribut rgba?

Un exemple rapide du 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, c'est écrire un style unique qui changerait l'opacité lorsque le <a>est survolé, tout en gardant la couleur inchangée.

Quelque chose comme

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

C'est désormais possible avec les propriétés personnalisées:

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

Pour comprendre comment cela fonctionne, consultez Comment appliquer l'opacité à une variable de couleur CSS?

Si les propriétés personnalisées ne sont pas une option, consultez la réponse d'origine ci-dessous.

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

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 ne pouvez utiliser le inheritmot - clé seul que comme valeur de la propriété, et même dans ce cas, l'utilisation de inheritn'est pas appropriée ici.

Vous pouvez faire diverses choses pour éviter d'avoir à coder en dur les nombres si vous le souhaitez. Certaines de ces méthodes ne fonctionnent que si vous utilisez un arrière-plan blanc uni car elles ajoutent vraiment du blanc sur le dessus plutôt que de réduire l'opacité. Le premier devrait fonctionner correctement pour tout ce qui est fourni:

• vous n'utilisez pas déjà l'élément psuedo pour quelque chose; et
• vous pouvez définir positionsur relatif ou absolu sur la <div>balise

Option 1: ::beforeélément psuedo:

.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: superposition de gif blanc:

.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-shadowméthode:

Une variante de la méthode gif, mais peut avoir des problèmes de performances.

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

Exemples CodePen: http://codepen.io/chrisboon27/pen/ACdka

Non, ce n'est pas possible.

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

D'après ce que j'ai pu voir, au moins LESS et Sass ont des fonctions qui peuvent rendre les couleurs plus ou moins transparentes.

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.

Nous sommes maintenant en 2017 et c'est désormais possible avec

Propriétés personnalisées CSS / Variables CSS ( Caniuse )

Un cas d'utilisation classique des variables CSS est la possibilité d'individualiser des parties de la valeur d'une propriété.

Donc ici, au lieu de répéter toute l'expression rgba une fois de plus - nous divisons ou `` individualisons '' les rgbavaleurs en 2 parties / variables (une pour la valeur rgb et une pour l'alpha)

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

Ensuite, en survolant, nous pouvons maintenant simplement modifier 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

Lectures complémentaires:

Personnalisation des propriétés CSS avec des variables CSS (Dan Wilson)

il existe une alternative, vous pouvez ajouter une image d'arrière-plan à gradient linéaire sur la couleur d'origine.

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

aussi, avec la propriété de filtre css3, vous pouvez le faire aussi, mais il semble que cela changera la couleur du texte

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

voici un jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

solution simple:

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25); 
     }
   }
}

exemple: https://jsfiddle.net/epwyL296/14/

il suffit de jouer avec l'alpha du fond. si vous voulez de la lumière au lieu de l'obscurité, remplacez simplement # 000 par #fff

Pourquoi ne pas utiliser :hoveret spécifier une opacité différente dans la classe de survol?

a:hover {
     opacity:0.6
}

J'avais un problème similaire. J'avais 18 divs différents fonctionnant comme des boutons, et chacun avec une couleur différente. Plutôt que de trouver les codes de couleur pour chacun ou d'utiliser un sélecteur div: hover pour changer l'opacité (qui affecte tous les enfants), j'ai utilisé la pseudo-classe: avant comme dans la réponse de @Chris Boon.

Parce que je voulais faire la coloration sur les éléments individuels, j'ai utilisé: before pour créer un div blanc transparent sur: hover. C'est un lavage très basique.

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

Selon CanIUse.com, cela devrait avoir quelque chose comme 92% de soutien au début de 2014. ( http://caniuse.com/#feat=css-gencontent )

Vous pouvez le faire avec des variables CSS, même si c'est un peu compliqué.

Tout d'abord, définissez une variable contenant uniquement les valeurs RVB, dans l'ordre, de la couleur que vous souhaitez utiliser:

:root {
  --color-success-rgb: 80, 184, 60; 
}

Ensuite, vous pouvez attribuer une valeur RGBA pour une couleur et extraire tout sauf la valeur alpha de cette variable:

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

Ce n'est pas super joli, mais cela vous permet d'utiliser les mêmes valeurs RVB mais des valeurs alpha différentes pour une couleur.

Mise à jour: ce n'est malheureusement 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 rgbapropriété n'a pas / ne prend pas en charge la inheritvaleur.

J'ai fait face à un problème similaire. Voici ce que j'ai fait et cela fonctionne bien ( only alpha changes on hover and also the text is not affected) par les étapes suivantes:

1) Appliquez une classe en surbrillance (ou celle de votre choix) à l'élément dont vous souhaitez modifier l'alpha d'arrière-plan.

2) Obtenez la couleur de fond rgba

3) Stockez-le dans une chaîne et manipulez-le (changez l'alpha) comme vous le souhaitez en survol (mouseenter et mouseleave)

Code HTML:

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

Code CSS:

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

Code Javascript:

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

Violon de travail: http://jsfiddle.net/HGHT6/1/

Solution de contournement simple avec opacitysi vous pouvez accueillir un léger changement dans background-color:

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}

Il s'agit de la manière la plus simple; mettez ceci dans votre feuille de style css:

a:hover { color : #c00; } 

terminé!