webentwicklung-frage-antwort-db.com.de

Kann man beim Schweben nur das Alpha einer Rgba-Hintergrundfarbe ändern?

Ich habe eine Reihe von <a>-Tags mit unterschiedlichen rgba-Hintergrundfarben, aber demselben 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 gerne tun würde, ist, einen einzigen Stil zu schreiben, der die Deckkraft ändert, wenn der <a> über die Position gezogen wird, wobei die Farbe jedoch unverändert bleibt. 

So etwas wie

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

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 das funktioniert, siehe Wie wende ich eine Deckfarbe 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 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 Schlüsselwort inherit nur als Wert für die Eigenschaft verwenden, und selbst dann ist die Verwendung von inherit hier nicht angebracht.

41
BoltClock

Sie können verschiedene Maßnahmen ergreifen, 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 und nicht die Deckkraft verringern. Der erste sollte für alles, was zur Verfügung gestellt wird, gut funktionieren:

  • sie verwenden das Pseudo-Element nicht bereits für etwas; und 
  • sie können position im <div>-Tag auf relativ oder absolut setzen

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: weiße GIF-Überlagerung:

.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-shadow-Methode:

Eine Variation der GIF-Methode, kann jedoch Leistungsprobleme aufweisen.

.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

12
Chris Boon

Nein, es ist nicht möglich.

Sie können jedoch einen CSS-Preprozessor versuchen, wenn Sie diese Art von Vorgang ausführen möchten.

Von dem, was ich sehen konnte, haben mindestens WENIGER und Sass Funktionen, die Farben mehr oder weniger transparent machen können.

12
mercator

Nein, das geht nicht.

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

6
thirtydot

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

Angepasste CSS-Eigenschaften/CSS-Variablen ( Caniuse )

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

Anstatt den gesamten rgba-Ausdruck noch einmal zu wiederholen, teilen wir die rgba-Werte in zwei Teile/Variablen auf ("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));
}

Im Hover-Modus können Sie nun 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

Lesen Sie weiter:

CSS-Eigenschaften mit CSS-Variablen anpassen (Dan Wilson)

5
Danield

Sie können dies mit CSS-Variablen tun, obwohl es etwas unordentlich ist.

Legen Sie zunächst eine Variable fest, die nur die RGB-Werte der gewünschten Farbe enthält:

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

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

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

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

2
Adam Hollett

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

a:hover {
     opacity:0.6
}

Ich hatte ein ähnliches Problem. Ich hatte 18 verschiedene Divs, die als Buttons arbeiteten und jeweils eine andere Farbe hatten. Anstatt die Farbcodes für jeden zu ermitteln oder einen div: hover-Selektor zu verwenden, um die Deckkraft zu ändern (was alle Kinder betrifft), habe ich die Pseudo-Klasse verwendet: Vorher wie in der Antwort von @ Cris Boon. 

Da ich die einzelnen Elemente farbig machen wollte, habe ich zuvor ein transparentes weißes div auf: hover erstellt. 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 diese Unterstützung Anfang 2014 etwa 92% betragen. ( http://caniuse.com/#feat=css-gencontent )

2
Josiah

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


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

Gemäß dem W3C hat/unterstützen die rgba-Eigenschaft den inherit-Wert nicht.

1
jezza-tan

es gibt eine Alternative: Sie können der Originalfarbe ein Hintergrundbild mit linearem Verlauf 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-Filter-Eigenschaft können Sie auch das tun, aber es scheint, dass die Textfarbe geändert wird

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

hier ist ein jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

1
Yu Zhang

Ich hatte ein ähnliches Problem. Folgendes habe ich gemacht und es funktioniert gut (only alpha changes on hover and also the text is not affected) durch die folgenden Schritte:

1) Wenden Sie eine hervorgehobene (oder eine beliebige von Ihnen gewählte) Klasse auf das Element an, dessen Hintergrundalphabet 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 möchten (Mauszeiger und Mauszeiger)

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

Arbeitsgeige: http://jsfiddle.net/HGHT6/1/

1
Rakhi

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/

spielen Sie einfach mit Alpha des Hintergrunds. Wenn Sie Licht anstelle von Dunkelheit wünschen, ersetzen Sie einfach # 000 durch #fff

0
Matrix

Einfache Problemumgehung mit opacity, wenn eine geringfügige Änderung in background-color möglich ist

.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