Có một dự phòng cho nền RGBA nền trong suốt trong CSS

Question

Tôi có hình ảnh div trên hình ảnh mà tôi sử dụng khi di chuột để có một số loại lớp sữa, mà tôi nhận được với background-color:rgba(255,255,255,0.1).

Khi tôi duyệt qua trình duyệt thử nghiệm trang web của tôi, tôi nhận ra rằng rgba không được hỗ trợ bởi IE8. Vì vậy, những gì tôi muốn là không có lớp sữa ở tất cả khi rgba không được hỗ trợ. Dưới đây là những gì tôi đã thử làm dự phòng:

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); 

Với cả ba lần thử, tôi có một lớp trống đầy trên hình ảnh của mình. Làm thế nào tôi có thể thực hiện điều này?

Answer 1

Tôi nghĩ rằng đây sẽ làm việc.

Bó hình ảnh trong một container:

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

áp dụng CSS sau đây:

.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; 
} 

Xem demo tại http://jsfiddle.net/audetwebdesign/DkRJs/

Ý tưởng là sử dụng định vị tuyệt đối để xác định vị trí một yếu tố trên hình ảnh và sau đó áp dụng thuộc tính độ mờ.

Nếu trình duyệt cũ không hỗ trợ phần tử giả, bạn sẽ cần đặt trực tiếp mã HTML.

Lưu ý: Tôi chỉ đọc lại câu hỏi ban đầu và nhận ra rằng tôi đã giải quyết được vấn đề sai. Xin lỗi vì sự bất tiện này.

IE8 Issue

Tôi thử nghiệm này trong IE8 và chỉ nhận ra rằng bạn cần filter tài sản để làm cho nó hoàn toàn tương thích ngược.

Answer 2

Nó không lý tưởng nhưng bạn có thể sử dụng png trong suốt 1px x 1px làm hình nền lặp lại. Bạn thậm chí có thể làm điều này bằng cách sử dụng IE ý kiến ​​có điều kiện để chỉ nhắm mục tiêu IE8.

Bạn cũng có thể sử dụng:

img:hover{opacity:0.8}