Mit einem Fallback für einen transparenten Hintergrund RGBA Hintergrund in CSS

Question

Ich habe ein div über ein Bild, das ich auf Hover verwenden, um eine Art milchige Schicht zu haben, die ich mit background-color:rgba(255,255,255,0.1) bekomme.

Da ich cross Browser meine Website testen, merke ich, dass rgba nicht von IE8 unterstützt wird. Also, was ich möchte, ist nicht, die milchige Schicht überhaupt zu haben, wenn rgba nicht unterstützt wird. Hier unten, was ich versuchte, als Rückfall:

1/ background-color:rgba(255,255,255,0.1); 

2/ background-color:transparent; background-color:rgba(255,255,255,0.1); 

3/ background-color:none; background-color:rgba(255,255,255,0.1); 

Bei allen drei Versuchen, ich habe eine volle, leere Ebene über mein Bild. Wie kann ich das erreichen?

Answer 1

Ich denke, die folgenden funktionieren wird.

Wickeln Sie das Bild in einem Behälter:

<div class="img-overlay"> 
    <img src="http://placekitten.com/200/200"> 
</div> 

gelten die folgenden CSS:

.img-overlay { 
    border: 1px solid blue; 
    float: left; 
    position: relative; 
} 
.img-overlay:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: white; 
    filter: alpha(opacity=40); /* internet explorer */ 
    opacity: 0.4; /* fx, safari, opera, chrome */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/ 
} 
img { 
    display: block; 
} 

Siehe Demo auf http://jsfiddle.net/audetwebdesign/DkRJs/

Die Idee ist, die absolute Positionierung zu verwenden, um ein Element zu positionieren über das Bild und wenden Sie dann die Opazität Eigenschaft an.

Wenn die älteren Browser das Pseudo-Element nicht unterstützen, müssen Sie den HTML-Code direkt einfügen.

Hinweis: Ich habe gerade die ursprüngliche Frage neu gelesen und festgestellt, dass ich das falsche Problem gelöst habe. Entschuldigung für die Unannehmlichkeiten.

IE8 Ausgabe

Getestet habe ich diese in IE8 und erkennen, dass Sie die filter Eigenschaft müssen sie kompatibel ganz nach hinten zu machen.

Answer 2

Es ist nicht ideal, aber Sie könnten ein 1px von 1px transparent Png als sich wiederholendes Hintergrundbild verwenden. Sie könnten dies auch mit IE-bedingten Kommentaren tun, nur um IE8 zu zielen.

Sie könnten auch verwenden:

img:hover{opacity:0.8}