Halbtransparente Hintergrundfarbe in CSS aus Hex RGB Wert

Hintergrund: Ich muss mit einem CMS arbeiten, das einige integrierte SASS-Funktionen bietet: Benutzer können Farben definieren, sie werden als Hex-Werte in einer Variablen den SCSS-Dateien zur Verfügung gestellt Ich kann bearbeiten.Halbtransparente Hintergrundfarbe in CSS aus Hex RGB Wert

Das Problem: Ich muss eine hellere Version von einem dieser Farben für einen Hintergrund eines div verwenden. (heller im Sinne einer Hintergrundfarbe mit etwas Transparenz).

Normalerweise würde ich das mit

background-color: rgba(r,g,b,a);

Aber was kann ich tun, wenn ich nicht die einzelnen Rot/Blau/Grün-Werte, sondern nur die kombinierten Hex-RGB-Werte habe?

Beispiel des Ergebnisses, das erreicht werden soll:

/* user color comes as a variable containing a hex value 
 
    variable: $color 
 
    example value: 00d; 
 
*/ 
 

 
h1{ 
 
    background-color: #00d; /* $color resolves to 00d */ 
 
} 
 

 
p{ 
 
    background-color: #7e7eed; /* <- this value should be calculated from the variable $color, in this case #00d + opacity 50% */ 
 
}

<h1>Title</h1> 
 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Quelle

2016-09-18 Teetrinker

prüfen diese Frage : http: //stackoverflow.c om/questions/7015302/css-hexadecimal-rgba – Wlada

Bearbeiten Sie das CMS, ändern Sie die Funktion, die die Funktionalität bereitstellt. – Sarcoma

@Wlada: Danke, tolle Zusammenstellungen von Antworten gibt es – Teetrinker

Verwenden lighten SASS Funktion

lighten($color, 20%)

Wenn Sie alfa Ihrer Farbe ändern möchten, verwenden Sie rgba function

rgba($color,0.8)

Siehe die demo

Quelle

2016-09-18 19:47:12

großartige Idee. muss prüfen, ob das vom CMS – Teetrinker

unterstützt wird, das mich auf den richtigen Weg brachte, es gab eine ähnliche Funktion im CMS. Vielen Dank! – Teetrinker

Ändern Sie die "Undurchsichtigkeit" CSS-Eigenschaft des CSS. Ein Wert von 0 ist vollständig transparent, ein Wert von 1 ist vollständig undurchsichtig und ein Wert von 0,5 ist halbtransparent usw. Kleinere Deckkraftwerte machen Ihre Farbe "heller". Jeder Wert zwischen 0 und 1 wird funktionieren. Dies entspricht im Wesentlichen dem Alpha-Wert in Ihrem rgba (a == alpha).

ref: http://www.w3schools.com/css/css_image_transparency.asp

Quelle

2016-09-18 15:27:03 mangotang

betrifft auch den Inhalt der Box, nicht nur den Hintergrund, so dass es keine Lösung ist. – Teetrinker

Halbtransparente Hintergrundfarbe in CSS aus Hex RGB Wert

Antwort

Verwandte Themen