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


100

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

Au fait, que font vos divéléments dans vos aéléments?
BoltClock


@mercator: D'accord. J'ai manqué ça.
BoltClock

@BoltClock Cela semblait le moyen le plus simple de coder pour l'effet, une seule abalise par opposition à une autour de imget une autre autour du texte. Le fait qu'il soit pris en charge par HTML 5 est un avantage appréciable.
Fireflight

Quand cette question a été posée - ce n'était pas possible avec CSS. Maintenant, c'est possible - avec des variables CSS - comme je l'ai montré dans ma propre réponse
Danield

Réponses:


51

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.


15

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


Bonne réponse, merci. J'ai trouvé la troisième option utile et plus simple si j'inverse cette méthode: n'utilisez rien de plus sans survol, et utilisez en survol: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0.2). Cela était nécessaire pour moi car mes rangées alternent blanc et gris clair, donc la réponse originale n'a pas changé le blanc.
Dovev Hefetz

12

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.


1
J'oublie toujours SCSS / LESS. Toujours. Peut-être que j'ai besoin de commencer à les utiliser.
BoltClock

Dans SCSS, il s'agit de la transparence ([couleur], 0,8). Voir sass-lang.com/documentation/Sass/Script/…
Arian Acosta

6

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.


5

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

Codepen

Lectures complémentaires:

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


3

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/


jusqu'à présent, la seule réponse satisfaisante pour moi.
Andre Elrico

3

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



2

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 )


2

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.


1
C'est une solution raisonnable au problème. Et, la variable avec la couleur n'a pas besoin d'être activée :root, elle peut être sur la classe d'élément, définissant sa couleur de base. Merci!
Brad

1

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.


Le problème est que ce inheritn'est pas un argument de fonction valide. Vous remarquerez que cela ne fonctionne avec aucune autre fonction CSS.
BoltClock

Par fonction, voulez-vous dire des choses comme rgbaet transitions? Parce que je sais qu'il est pris en charge par un certain nombre de propriétés.
ayyp

Ouais, avec url(), attr()etc. aussi. inheritest une valeur de propriété uniquement.
BoltClock

Je connaissais url()déjà et les transitions. Je n'étais tout simplement pas sûr à 100% rgbacar il est utilisé pour les couleurs. Merci de m'avoir éduqué :)!
ayyp

1

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/


0

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

-5

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

a:hover { color : #c00; } 

terminé!


- faites simplement correspondre la couleur à quelque chose de proche. l'opacité ne fonctionne pas dans tous les navigateurs.
dr. null

Votre réponse a une belle astuce, mais votre commentaire est totalement hors de propos.
BoltClock
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.