Ich habe eine PNG-Datei, die ich eine Hintergrundfarbe zu seinen transparenten Bereichen geben, aber ich möchte die Hintergrundfarbe ein wenig transparent machen, wie Opazität. Hier ist mein Code so weit:Wie ändere ich die Deckkraft der Hintergrundfarbe in CSS
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
}
background: rgba(0,0,0,.5);
Sie rgba für Opazität verwenden können, werden nur in ie9 arbeiten + und bessere Browser
Verwenden RGBA wie folgt aus: background-color: rgba(255, 0, 0, .5)
Verwenden RGB Werte kombiniert mit Opazität, um die Transparenz zu erhalten, die Sie wünschen.
Zum Beispiel
<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"> </div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"> </div>
In ähnlicher Weise mit den tatsächlichen Werten ohne Trübung, wird der unten geben.
<div style=" background: rgb(243, 191, 189) ; "> </div>
<div style=" background: rgb(246, 143, 142) ; "> </div>
<div style=" background: rgb(249, 95 , 94) ; "> </div>
<div style=" background: rgb(252, 47, 47) ; "> </div>
<div style=" background: rgb(255, 0, 0) ; "> </div>
Sie können diese WORKING EXAMPLE betrachten.
Jetzt, Wenn wir Ihr Problem gezielt ansprechen, hier ist die WORKING DEMO SPECIFIC TO YOUR ISSUE.
Die HTML
<div class="social">
<img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>
Die CSS:
social img{
opacity:0.5;
}
.social img:hover {
opacity:1;
background-color:black;
cursor:pointer;
background: rgb(255, 0, 0) ; opacity: 0.5;
}
Hope this Jetzt hilft.
Beachten Sie, dass mit etwas wie:
Nicht so sicher, Deckkraft über CSS hinzufügen ist so eine gute Idee.
Opazität hat diese lustige Methode, die auf alle Inhalte und untergeordneten Elemente angewendet werden kann, 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, legen Sie es das Bild schweben, dann können Sie mehrere Hintergründe verwenden.
diese Farbe transparent applyed über eine zusätzliche png wiederholt werden könnte (oder auch nicht mit Hintergrund-Position),
CSS Gradient (Radial-) linearen Gradienten mit rgba Farben (beginnend und mit der gleichen Farbe endet) erreichen können das auch. Sie werden als Hintergrundbild behandelt und können als Filter verwendet werden.
Idem 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 lustige Verhalten der CSS-Opazität fallen lassen können.
ist hier eine gemischte von rgba für Opazität verwendet, wenn Sie neugierig dabblet.com/gist/5685845
Verwendung rgba sind als die meisten der gängigen Browser unterstützt ..
.social img:hover {
background-color: rgba(0, 0, 0, .5)
}
Ist es möglich, nur die Deckkraft mit einer bereits eingestellten rgb Hintergrundfarbe zu ändern? – andufo