web-dev-qa-db-fra.com

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

J'ai un ensemble de balises <a> avec différentes couleurs d'arrière-plan rgba 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 j'aimerais faire est d'écrire un seul style qui changerait l'opacité lorsque le <a> est survolé, tout en maintenant la couleur inchangée 

Quelque chose comme

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

Ceci est maintenant 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, voir Comment appliquer l'opacité à une variable de couleur CSS?

Si les propriétés personnalisées ne sont pas une option, voir la réponse originale ci-dessous.

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 en tant que valeur de la propriété. Même dans ce cas, l'utilisation de inherit n'est pas appropriée ici.

41
BoltClock

Vous pouvez faire diverses choses pour éviter de coder en dur les nombres si vous le souhaitez. Certaines de ces méthodes ne fonctionnent que si vous utilisez un fond blanc uni car elles ajoutent réellement du blanc au lieu de réduire l'opacité. Le premier devrait bien fonctionner pour tout ce qui est fourni:

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

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

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: méthode box-shadow:

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

12
Chris Boon

Non, ce n'est pas possible.

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

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

12
mercator

Non, ce n'est pas possible.

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

6
thirtydot

C'est maintenant 2017 et c'est maintenant 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 une nouvelle fois l'expression rgba complète -.__, nous séparons ou 'individualisons' les valeurs rgba 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 survol, nous pouvons maintenant 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)

5
Danield

Vous pouvez le faire avec des variables CSS, bien que ce soit un peu compliqué.

Commencez par définir une variable contenant juste les valeurs RVB, dans l’ordre, de la couleur que vous souhaitez utiliser:

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

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

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

Ce n'est pas très beau, mais vous permet d'utiliser les mêmes valeurs RVB mais des valeurs alpha différentes pour une couleur.

2
Adam Hollett

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

a:hover {
     opacity:0.6
}
2
Diodeus - James MacFarlane

J'avais un problème similaire. J'avais 18 divs différents travaillant comme boutons, 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 modifier l'opacité (qui affecte tous les enfants), j'ai utilisé la pseudo-classe: auparavant, comme dans la réponse de @Chris Boon. 

Parce que je voulais faire la coloration sur les éléments individuels, j'ai utilisé: avant de créer une div blanche transparente sur: survolez. Ceci 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, le soutien devrait atteindre environ 92% à compter de début 2014. ( http://caniuse.com/#feat=css-gencontent )

2
Josiah

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 propriété rgba n'a pas/prend en charge la valeur inherit.

1
jezza-tan

il existe une alternative, vous pouvez ajouter une image d'arrière-plan à dégradé 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/

1
Yu Zhang

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) en procédant comme suit:

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

2) Obtenir la couleur de fond rgba

3) Stockez-le dans une chaîne et manipulez-le (changez 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');

Working Fiddle: http://jsfiddle.net/HGHT6/1/

1
Rakhi

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 alpha de fond. si vous voulez de la lumière au lieu des ténèbres, remplacez simplement # 000 par #fff

0
Matrix

Solution de contournement simple avec opacity si vous pouvez accepter 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;
}
0
Alfred Wallace