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);}
css
hover
background-color
rgba
Feuer Flug
quelle
quelle
div
Elemente in deinena
Elementen?a
Elemente aufa
Tag im Gegensatz zu einemimg
um den Text und einem anderen um den Text herum. Die Tatsache, dass es von HTML 5 unterstützt wird, ist ein schöner Bonus.Antworten:
Dies ist jetzt mit benutzerdefinierten Eigenschaften möglich:
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:
Sie können das
inherit
Schlüsselwort nur als Wert für die Eigenschaft verwenden, und selbst dann ist die Verwendung voninherit
hier nicht angemessen.quelle
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:
position
für das<div>
Tag relativ oder absolut festlegenOption 1:
::before
Pseudo-Element:Option 2: weißes GIF-Overlay:
Option 3:
box-shadow
Methode:Eine Variation der GIF-Methode, die jedoch möglicherweise Leistungsprobleme aufweist.
CodePen-Beispiele: http://codepen.io/chrisboon27/pen/ACdka
quelle
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.
quelle
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.quelle
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
rgba
Werte in zwei Teile / Variablen auf oder individualisieren sie (einen für den rgb-Wert und einen für das Alpha).Beim Schweben können wir dann einfach die Variable --alpha ändern:
Code-Snippet anzeigen
Codepen
Weiterführende Literatur:
Individualisieren von CSS-Eigenschaften mit CSS-Variablen (Dan Wilson)
quelle
Es gibt eine Alternative: Sie können der Originalfarbe ein Hintergrundbild mit linearem Farbverlauf hinzufügen.
Mit der CSS3-Filtereigenschaft können Sie dies auch tun, aber es scheint, dass dadurch die Textfarbe geändert wird
Hier ist eine jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/
quelle
einfache Lösung:
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
quelle
Warum nicht
:hover
eine andere Deckkraft in der Hover-Klasse verwenden und angeben?quelle
fill-opacity
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.
Laut CanIUse.com sollte dies ab Anfang 2014 zu 92% unterstützt werden. ( Http://caniuse.com/#feat=css-gencontent )
quelle
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:
Dann können Sie einer Farbe einen RGBA-Wert zuweisen und alles außer dem Alpha-Wert aus dieser Variablen ziehen:
Das ist nicht besonders hübsch, aber Sie können dieselben RGB-Werte, aber unterschiedliche Alpha-Werte für eine Farbe verwenden.
quelle
:root
, sondern kann sich auf die Elementklasse beziehen und ihre Grundfarbe festlegen. Vielen Dank!Update: Das ist leider nicht möglich. Sie müssen zwei separate Selektoren schreiben für:
Laut W3C
rgba
hat / unterstützt die Eigenschaft deninherit
Wert nicht.quelle
inherit
kein gültiges Funktionsargument ist. Sie werden feststellen, dass es mit keiner anderen CSS-Funktion funktioniert.rgba
undtransitions
? Weil ich weiß, dass es mit einigen Eigenschaften unterstützt wird.url()
,attr()
etc auch.inherit
ist nur ein Eigenschaftswert.url()
und Übergänge. Ich war mir einfach nicht 100% sicher,rgba
weil es für Farben verwendet wird. Danke, dass du mich erzogen hast :)!Ich hatte ein ähnliches Problem.
only alpha changes on hover and also the text is not affected
Folgendes 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:
CSS-Code:
Javascript Code:
Working Fiddle: http://jsfiddle.net/HGHT6/1/
quelle
Einfache Problemumgehung mit,
opacity
wenn Sie eine geringfügige Änderung in berücksichtigen könnenbackground-color
:quelle
Dies ist ungefähr der einfachste Weg; Fügen Sie dies in Ihr CSS-Stylesheet ein:
getan!
quelle