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

100

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);}
Feuer Flug
quelle
Übrigens, was machen deine divElemente in deinen aElementen?
BoltClock
2
@BoltClock HTML5 ermöglicht aElemente auf
Mercator
@mercator: In Ordnung. Das habe ich vermisst.
BoltClock
@BoltClock Es schien der einfachste Weg zu sein, den Effekt zu codieren, ein einzelnes aTag im Gegensatz zu einem imgum den Text und einem anderen um den Text herum. Die Tatsache, dass es von HTML 5 unterstützt wird, ist ein schöner Bonus.
Feuerflug
Als diese Frage gestellt wurde, war dies mit CSS nicht möglich. Nun ist dies möglich - mit CSS-Variablen - wie ich in meiner eigenen Antwort
Danield

Antworten:

50

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.

BoltClock
quelle
15

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

Chris Boon
quelle
Gute Antwort, danke. Ich fand die dritte Option nützlich und einfacher, wenn ich diese Methode umkehrte: Verwenden Sie nichts zusätzliches ohne Hover, und verwenden Sie beim Hover: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0.2). Dies war für mich notwendig, da meine Zeilen weiß und hellgrau abwechseln, sodass die ursprüngliche Antwort das Weiß nicht änderte.
Dovev Hefetz
12

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.

Mercator
quelle
1
Ich vergesse immer SCSS / LESS. Immer. Vielleicht muss ich anfangen, sie tatsächlich zu benutzen.
BoltClock
In SCSS ist es transparent ([Farbe], 0,8). Siehe sass-lang.com/documentation/Sass/Script/…
Arian Acosta
6

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.

dreißig Punkte
quelle
5

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

Codepen

Weiterführende Literatur:

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

Danield
quelle
3

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/

Yu Zhang
quelle
Bisher die einzig befriedigende Antwort für mich.
Andre Elrico
3

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

Matrix
quelle
2

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

a:hover {
     opacity:0.6
}
Diodeus - James MacFarlane
quelle
13
Weil das das ganze Element betrifft.
BoltClock
3
mit SVG-Objekten ist es möglich zu verwendenfill-opacity
Aprillion
1
nicht nur das ganze Element, sondern auch alle untergeordneten Elemente.
Daniel F
2

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 )

Josiah
quelle
2

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.

Adam Hollett
quelle
1
Dies ist eine vernünftige Lösung für das Problem. Und die Variable mit Farbe muss nicht aktiviert sein :root, sondern kann sich auf die Elementklasse beziehen und ihre Grundfarbe festlegen. Vielen Dank!
Brad
1

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.

Ayyp
quelle
Das Problem ist, dass dies inheritkein gültiges Funktionsargument ist. Sie werden feststellen, dass es mit keiner anderen CSS-Funktion funktioniert.
BoltClock
Mit Funktion meinen Sie Dinge wie rgbaund transitions? Weil ich weiß, dass es mit einigen Eigenschaften unterstützt wird.
Ayyp
Yup, zusammen mit url(), attr()etc auch. inheritist nur ein Eigenschaftswert.
BoltClock
Ich wusste schon über url()und Übergänge. Ich war mir einfach nicht 100% sicher, rgbaweil es für Farben verwendet wird. Danke, dass du mich erzogen hast :)!
Ayyp
1

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/

Rakhi
quelle
0

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;
}
Alfred Wallace
quelle
-5

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

a:hover { color : #c00; } 

getan!

DR. Null
quelle
- Passen Sie die Farbe einfach an etwas Nahes an. Die Deckkraft funktioniert nicht in allen Browsern.
dr. null
Ihre Antwort hat einen schönen Trick, aber Ihr Kommentar ist völlig irrelevant.
BoltClock