Độ mờ nền CSS với rgba không hoạt động trong IE 8

Tôi đang sử dụng CSS này cho độ mờ nền của <div>:

background: rgba(255, 255, 255, 0.3);

Nó hoạt động tốt trên Firefox, nhưng không hoạt động trong IE 8. Làm cách nào để làm cho nó hoạt động?

Tạo một png lớn hơn 1x1 pixel (cảm ơn ba mươi điểm) và phù hợp với độ trong suốt của nền của bạn.

CHỈNH SỬA: để hỗ trợ IE6 +, bạn có thể chỉ định bkgd chunk cho png, đây là màu sẽ thay thế độ trong suốt alpha thực sự nếu nó không được hỗ trợ. Bạn có thể sửa nó bằng gimp vd.

để mô phỏng nền RGBA và HSLA trong IE, bạn có thể sử dụng bộ lọc gradient, có cùng màu bắt đầu và màu kết thúc (kênh alpha là cặp đầu tiên trong giá trị của HEX)

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Tôi tin rằng đây là cách tốt nhất vì trên trang này có một công cụ giúp bạn tạo nền trong suốt alpha:

" CSS nền trong suốt alpha của trình duyệt chéo (rgba) " ^{_{(* hiện được liên kết với archive.org)}}

#div {
    background:rgb(255,0,0);
    background: transparent\9;
    background:rgba(255,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;
}

hình ảnh png trong suốt sẽ không hoạt động trong IE 6-, các lựa chọn thay thế là:

với CSS:

.transparent {

    /* works for IE 5+. */
    filter:alpha(opacity=30); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.3; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.3; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.3; 
}

hoặc chỉ làm điều đó với jQuery:

// a crossbrowser solution
$(document).ready(function(){ 
    $(".transparent").css('opacity','.3');
});

Mặc dù đã muộn nhưng tôi đã phải sử dụng nó ngay hôm nay và tìm thấy một tập lệnh php rất hữu ích ở đây cho phép bạn tạo động một tệp png, giống như cách hoạt động của rgba.

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

Tập lệnh có thể được tải xuống tại đây: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Tôi biết nó có thể không phải là giải pháp hoàn hảo cho tất cả mọi người, nhưng nó đáng để xem xét trong một số trường hợp, vì nó tiết kiệm rất nhiều thời gian và hoạt động hoàn hảo. Hy vọng điều đó sẽ giúp ai đó!

Hầu hết các trình duyệt đều hỗ trợ mã RGBa trong CSS nhưng chỉ IE8 trở xuống không hỗ trợ mã RGBa css. Đối với Đây là giải pháp. Đối với Giải pháp, bạn phải tuân theo mã này và tốt hơn là hãy làm theo trình tự của nó nếu không bạn sẽ không nhận được đầu ra hoàn hảo như bạn muốn. Mã này được tôi sử dụng và nó hầu như hoàn hảo. đưa ra nhận xét nếu nó hoàn hảo.

.class
 {
        /* Web browsers that does not support RGBa */
        background: rgb(0, 0, 0);
        /* IE9/FF/chrome/safari supported */
        background: rgba(0, 0, 0, 0.6);
        /* IE 8 suppoerted */
        /* Here some time problem for Hover than you can use background color/image */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
        /* Below IE7 supported */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
 }

Bạn sử dụng css để thay đổi độ mờ. Để đối phó với IE, bạn cần một số thứ như:

.opaque {
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
}

Nhưng vấn đề duy nhất với điều này là nó có nghĩa là bất kỳ thứ gì bên trong vùng chứa cũng sẽ có độ mờ 0,3. Vì vậy, bạn sẽ phải thay đổi HTML của mình để có một vùng chứa khác, không phải bên trong vùng trong suốt, chứa nội dung của bạn.

Nếu không, kỹ thuật png sẽ hoạt động. Ngoại trừ việc bạn cần một bản sửa lỗi cho IE6, bản thân nó có thể gây ra sự cố.

Tôi đến muộn bữa tiệc, nhưng đối với bất kỳ ai khác tìm thấy điều này - bài viết này rất hữu ích: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Nó sử dụng bộ lọc gradient để hiển thị màu đồng nhất nhưng trong suốt.

Để sử dụng rgbanền trong IE, có một dự phòng.

Chúng tôi phải sử dụng thuộc tính bộ lọc. Sử dụngARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

đây là dự phòng cho rgba(255, 255, 255, 0.2)

Thay đổi #33fffffftheo ý bạn.

Cách tính toán ARGBchoRGBA

điều này giúp tôi giải quyết vấn đề trong IE8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

Chúc mừng

Giải pháp này thực sự hiệu quả, hãy thử nó. Đã thử nghiệm trong IE8

.dash-overlay{ 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 
}

Rất đơn giản, bạn phải cung cấp trước tiên bạn phải cung cấp backgound là rgb vì Internet Explorer 8 sẽ hỗ trợ rgb thay vì rgba và sau đó bạn phải cung cấp độ mờ như filter:alpha(opacity=50);

background:rgb(0,0,0);
filter:alpha(opacity=50);

Đây là một giải pháp minh bạch cho hầu hết các trình duyệt bao gồm IE x

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

Giải pháp tốt nhất mà tôi tìm thấy cho đến nay là giải pháp do David J Marland đề xuất trong blog của anh ấy , để hỗ trợ độ mờ trong các trình duyệt cũ (IE 6+):

.alpha30{
    background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */ 
    background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
    zoom: 1; /* needed for IE 6-8 */
}

/* 
 * CSS3 selector (not supported by IE 6 to IE 8),
 * to avoid IE more recent versions to apply opacity twice
 * (once with rgba and once with filter)
 */
.alpha30:nth-child(n) {
    filter: none;
}

Sau khi tìm kiếm rất nhiều, tôi đã tìm thấy giải pháp sau đây đang hoạt động trong trường hợp của tôi:

.opacity_30{
    background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */ 
    background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
    zoom: 1; /* Hack needed for IE 6-8 */
}

/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
    filter: none;
}

* Quan trọng: Để tính toán ARGB (cho IE) từ RGBA, chúng tôi có thể sử dụng các công cụ trực tuyến:

1. https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/