Est-il possible de changer uniquement l’alpha d’une couleur d’arrière-plan rgba en vol stationnaire?

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, consultez la réponse originale ci-dessous.

Malheureusement, non, vous devrez à nouveau spécifier 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 que le mot-clé inherit comme valeur pour la propriété, et même dans ce cas, l’utilisation de inherit n’est pas appropriée ici.

Non, ce n’est pas possible.

Vous pourriez 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 rendent les couleurs plus ou moins transparentes.

Vous pouvez faire diverses choses pour éviter d’avoir à coder les chiffres si vous le souhaitez. Certaines de ces méthodes ne fonctionnent que si vous utilisez un fond blanc, car elles ajoutent du blanc plutôt que de réduire l’opacité. Le premier devrait fonctionner correctement pour tout ce qui est prévu:

• vous n’utilisez pas déjà l’élément psuedo pour quelque chose; et
• vous pouvez définir la position relative ou absolue sur la

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 performance.

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

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

C’est maintenant 2017 et c’est maintenant possible avec

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

Un cas classique d’utilisation 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 de rgba une fois de plus, nous séparons ou «individulons» les valeurs de rgba en 2 parties / variables (une pour la valeur de 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; } 

  
Link 1
   
Link 2
  

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

 a:hover { opacity:0.6 } 

J’avais un problème similaire. J’ai eu 18 divs différents fonctionnant comme des boutons, et chacun avec une couleur différente. Plutôt que de déterminer les codes de couleur pour chacun ou d’utiliser un sélecteur hover: pour modifier 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 de la coloration sur les éléments individuels, j’ai utilisé: avant de 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 support dès le début de 2014. ( http://caniuse.com/#feat=css-gencontent )

Vous pouvez le faire avec les 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; } 

Vous pouvez ensuite atsortingbuer une valeur RGBA à 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 il vous permet d’utiliser les mêmes valeurs RVB mais des valeurs alpha différentes pour une couleur.

Mise à jour: il n’est pas possible de le faire malheureusement. 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 / ne supporte pas la valeur rgba .

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 l’une de vos choix) à l’élément que vous souhaitez modifier en alpha.

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 vol stationnaire (mouseenter et mouseleave)

Code HTML:

 
Link 1


 
Link 1 

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.subssortingng(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.subssortingng(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/

il existe une alternative, vous pouvez append une image d’arrière-plan à dégradé linéaire à 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 } 

de plus, 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/

Jouez simplement avec l’alpha du fond. Si vous voulez de la lumière au lieu de l’obscurité, remplacez simplement # 000 par #fff

Solution de contournement simple avec une opacity si vous pouvez accepter un léger changement de 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; } 

C’est à peu près la manière la plus simple. mettez ceci dans votre feuille de style css:

 a:hover { color : #c00; } 

terminé!