Ist es möglich, beim Schweben nur das Alpha einer RGBA-Hintergrundfarbe zu ändern?

Ich habe eine Reihe von <a>Tags mit unterschiedlichen RGBA-Hintergrundfarben, aber dem gleichen Alpha. Ist es möglich, einen einzelnen CSS-Stil zu schreiben, der nur die Deckkraft des rgba-Attributs ändert?

Ein kurzes Beispiel für den Code:

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

Und die Stile

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

Was ich tun möchte, ist einen einzelnen Stil zu schreiben, der die Deckkraft ändert, wenn der <a> Mauszeiger darüber bewegt wird, aber die Farbe unverändert lässt.

Etwas wie

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

Dies ist jetzt mit benutzerdefinierten Eigenschaften möglich:

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

Um zu verstehen, wie dies funktioniert, lesen Sie Wie wende ich Deckkraft auf eine CSS-Farbvariable an?

Wenn benutzerdefinierte Eigenschaften keine Option sind, lesen Sie die ursprüngliche Antwort unten.

Leider müssen Sie die Werte für Rot, Grün und Blau für jede einzelne Klasse erneut angeben:

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

Sie können das inheritSchlüsselwort nur als Wert für die Eigenschaft verwenden, und selbst dann ist die Verwendung von inherithier nicht angemessen.

Sie können verschiedene Dinge tun, um zu vermeiden, dass Sie die Zahlen hart codieren müssen, wenn Sie möchten. Einige dieser Methoden funktionieren nur, wenn Sie einen einfachen weißen Hintergrund verwenden, da sie wirklich Weiß hinzufügen, anstatt die Deckkraft zu verringern. Der erste sollte für alles, was zur Verfügung gestellt wird, gut funktionieren:

• Sie verwenden das Pseudo-Element noch nicht für etwas; und
• Sie können positionfür das <div>Tag relativ oder absolut festlegen

Option 1: ::beforePseudo-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: weißes GIF-Overlay:

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

Eine Variation der GIF-Methode, die jedoch möglicherweise Leistungsprobleme aufweist.

.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-Beispiele: http://codepen.io/chrisboon27/pen/ACdka

Nein, es ist nicht möglich.

Sie können jedoch einen CSS-Vorprozessor ausprobieren , wenn Sie so etwas tun möchten.

Soweit ich sehen konnte, haben zumindest WENIGER und Sass Funktionen, die Farben mehr oder weniger transparent machen können.

Nein, das ist nicht möglich.

Wenn Sie verwenden möchten rgba, müssen Sie jeden Wert zusammen setzen. Es gibt keine Möglichkeit, nur das Alpha zu ändern.

Es ist jetzt 2017 und das ist jetzt mit möglich

Benutzerdefinierte CSS-Eigenschaften / CSS-Variablen ( Caniuse )

Ein klassischer Anwendungsfall für CSS-Variablen ist die Möglichkeit, Teile des Werts einer Eigenschaft zu individualisieren.

Anstatt den gesamten rgba-Ausdruck noch einmal zu wiederholen, teilen wir die rgbaWerte in zwei Teile / Variablen auf oder individualisieren sie (einen für den rgb-Wert und einen für das Alpha).

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

Beim Schweben können wir dann einfach die Variable --alpha ändern:

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

Weiterführende Literatur:

Individualisieren von CSS-Eigenschaften mit CSS-Variablen (Dan Wilson)

Es gibt eine Alternative: Sie können der Originalfarbe ein Hintergrundbild mit linearem Farbverlauf hinzufügen.

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
}

Mit der CSS3-Filtereigenschaft können Sie dies auch tun, aber es scheint, dass dadurch die Textfarbe geändert wird

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

Hier ist eine jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

einfache Lösung:

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

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

Spiele einfach mit dem Alpha des Hintergrunds. Wenn Sie Licht statt Dunkelheit wünschen, ersetzen Sie einfach # 000 durch #fff

Warum nicht :hovereine andere Deckkraft in der Hover-Klasse verwenden und angeben?

a:hover {
     opacity:0.6
}

Ich hatte ein ähnliches Problem. Ich hatte 18 verschiedene Divs als Knöpfe und jeder mit einer anderen Farbe. Anstatt die Farbcodes für jeden herauszufinden oder einen div: hover-Selektor zu verwenden, um die Deckkraft zu ändern (die alle Kinder betrifft), habe ich die Pseudoklasse: vor wie in der Antwort von @Chris Boon verwendet.

Da ich die einzelnen Elemente einfärben wollte, habe ich: before verwendet, um ein transparentes weißes div on: hover zu erstellen. Dies ist eine sehr einfache Auswaschung.

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

Laut CanIUse.com sollte dies ab Anfang 2014 zu 92% unterstützt werden. ( Http://caniuse.com/#feat=css-gencontent )

Sie können dies mit CSS-Variablen tun, obwohl es ein wenig chaotisch ist.

Legen Sie zunächst eine Variable fest, die nur die RGB-Werte in der Reihenfolge der Farbe enthält, die Sie verwenden möchten:

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

Dann können Sie einer Farbe einen RGBA-Wert zuweisen und alles außer dem Alpha-Wert aus dieser Variablen ziehen:

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

Das ist nicht besonders hübsch, aber Sie können dieselben RGB-Werte, aber unterschiedliche Alpha-Werte für eine Farbe verwenden.

Update: Das ist leider nicht möglich. Sie müssen zwei separate Selektoren schreiben für:

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

Laut W3C rgbahat / unterstützt die Eigenschaft den inheritWert nicht.

Ich hatte ein ähnliches Problem. only alpha changes on hover and also the text is not affectedFolgendes habe ich getan und es funktioniert gut ( ) mit den folgenden Schritten:

1) Wenden Sie eine hervorgehobene (oder eine beliebige) Klasse auf das Element an, dessen Hintergrund-Alpha Sie ändern möchten.

2) Holen Sie sich die Hintergrundfarbe rgba

3) Speichern Sie es in einer Zeichenfolge und bearbeiten Sie es (ändern Sie das Alpha), wie Sie es beim Hover möchten (Mouseenter und Mouseleave).

HTML Quelltext:

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

CSS-Code:

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

Javascript Code:

$(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/

Einfache Problemumgehung mit, opacitywenn Sie eine geringfügige Änderung in berücksichtigen können 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;
}

Dies ist ungefähr der einfachste Weg; Fügen Sie dies in Ihr CSS-Stylesheet ein:

a:hover { color : #c00; } 

getan!