So ändern Sie die Opazität der Hintergrundfarbe in CSS [duplizieren]

8

Ich habe eine PNG-Datei, die den transparenten Bereichen eine Hintergrundfarbe gibt, aber ich möchte die Hintergrundfarbe ein wenig transparent machen, wie die Opazität. Hier ist mein Code so weit:

%Vor%     
Alex Jj 02.06.2013, 15:43
quelle

5 Antworten

24
%Vor%

Sie können rgba für die Deckkraft verwenden, funktioniert nur in ie9 + und besseren Browsern

    
bob 02.06.2013, 15:46
quelle
3

Verwenden Sie RGBA wie folgt: background-color: rgba(255, 0, 0, .5)

    
bookcasey 02.06.2013 15:46
quelle
1

Verwenden Sie RGB Werte kombiniert mit Opazität , um die gewünschte Transparenz zu erhalten.

Zum Beispiel

%Vor%

Ähnlich verhält es sich mit tatsächlichen Werten ohne Deckkraft, die unten geben.

%Vor%

Sie können sich dieses ARBEITSBEISPIEL ansehen.

Jetzt, wenn wir Ihr Problem gezielt ansprechen, finden Sie hier die ARBEITSDEMO FÜR IHR PROBLEM .

Der HTML-Code

%Vor%

Das CSS:

%Vor%

Hoffe, das hilft jetzt.

    
Nitesh 02.06.2013 15:50
quelle
1

Ich bin mir nicht sicher, ob ich die Deckkraft über CSS hinzufügen könnte Die Deckkraft hat diese lustige Methode, die auf alle Inhalte und untergeordneten Elemente angewendet wird, von denen Sie sie festgelegt haben, mit unerwarteten Ergebnissen in gemischten Farben Es hat keinen wirklichen Zweck in diesem Fall, für eine bg Farbe, meiner Meinung nach Wenn Sie möchten, dass das Bild schwebt, können Sie mehrere Hintergründe verwenden.
Diese Farbe transparent könnte über ein zusätzliches png wiederholt werden (oder nicht mit Hintergrund-Position),
CSS gradient (radial -) linear-gradient mit rgba colors (beginnend und endend mit gleicher Farbe) kann dies auch erreichen. Sie werden als Hintergrundbild behandelt und können als Filter verwendet werden.
Für Text, wenn Sie sie ein bisschen transparent wollen, verwenden Sie rgba (okay, um Text-Schatten zusammen zu setzen).

Ich denke, dass wir heute das Verhalten von CSS-Deckkraft ablegen können.

Hier ist ein Mix aus rgba für die Deckkraft, wenn Sie neugierig sind dabblet.com/gist/5685845

    
G-Cyr 02.06.2013 17:00
quelle
1

Verwenden Sie rgba, da die meisten gängigen Browser dies unterstützen.

%Vor%     
Mohd. Umar 02.06.2013 17:43
quelle

Tags und Links