Opasitas latar belakang CSS dengan rgba tidak berfungsi di IE 8

Saya menggunakan CSS ini untuk opacity latar belakang a <div>:

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

Ini berfungsi dengan baik di Firefox, tetapi tidak di IE 8. Bagaimana cara membuatnya bekerja?

Buat png yang lebih besar dari 1x1 piksel (terima kasih tiga puluh titik), dan yang sesuai dengan transparansi latar belakang Anda.

EDIT: untuk mundur ke dukungan IE6 +, Anda dapat menentukan bkgd chunk untuk png, ini adalah warna yang akan menggantikan transparansi alpha yang sebenarnya jika tidak didukung. Anda dapat memperbaikinya dengan gimp mis.

untuk mensimulasikan latar belakang RGBA dan HSLA di IE, Anda dapat menggunakan filter gradien, dengan warna awal dan akhir yang sama (saluran alfa adalah pasangan pertama dalam nilai HEX)

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

Saya yakin ini yang terbaik karena di halaman ini terdapat alat untuk membantu Anda menghasilkan latar belakang transparan alfa:

" Cross browser alpha transparent background CSS (rgba) " ^{_{(* sekarang ditautkan ke 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;
}

gambar png transparan tidak akan berfungsi di IE 6-, alternatifnya adalah:

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

atau lakukan saja dengan jQuery:

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

Meskipun terlambat, saya harus menggunakannya hari ini dan menemukan skrip php yang sangat berguna di sini yang memungkinkan Anda untuk membuat file png secara dinamis, seperti cara kerja rgba.

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

Script dapat diunduh di sini: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Saya tahu ini mungkin bukan solusi yang tepat untuk semua orang, tetapi perlu dipertimbangkan dalam beberapa kasus, karena menghemat banyak waktu dan bekerja dengan sempurna. Semoga itu bisa membantu seseorang!

Hampir semua browser mendukung kode RGBa di CSS tetapi hanya IE8 dan level di bawahnya yang tidak mendukung kode RGBa css. Untuk ini, inilah solusinya. Untuk solusinya Anda harus mengikuti kode ini dan lebih baik mengikuti urutannya jika tidak, Anda tidak akan mendapatkan hasil yang sempurna seperti yang Anda inginkan. Kode ini digunakan oleh saya dan sebagian besar sempurna. beri komentar jika itu sempurna.

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

Anda menggunakan css untuk mengubah opacity. Untuk mengatasi IE, Anda memerlukan sesuatu seperti:

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

Tetapi satu-satunya masalah dengan ini adalah itu berarti apa pun di dalam wadah juga akan menjadi 0,3 opasitas. Jadi Anda harus mengubah HTML Anda untuk memiliki wadah lain, bukan di dalam yang transparan, yang menyimpan konten Anda.

Jika tidak, teknik png akan berhasil. Kecuali Anda memerlukan perbaikan untuk IE6, yang dengan sendirinya dapat menyebabkan masalah.

Saya terlambat ke pesta, tetapi untuk siapa pun yang menemukan ini - artikel ini sangat berguna: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Ini menggunakan filter gradien untuk menampilkan warna solid namun transparan.

Untuk menggunakan rgbalatar belakang di IE, ada fallback.

Kita harus menggunakan properti filter. yang menggunakanARGB

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

ini adalah fallback untuk rgba(255, 255, 255, 0.2)

Ubah #33ffffffsesuai keinginan Anda.

Bagaimana menghitung ARGBuntukRGBA

ini berhasil bagi saya untuk menyelesaikan masalah di IE8:

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

Bersulang

Solusi ini benar-benar berfungsi, cobalah. Diuji di IE8

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

Sangat sederhana Anda harus memberikan terlebih dahulu Anda harus memberikan backgound sebagai rgb karena Internet Explorer 8 akan mendukung rgb bukan rgba dan kemudian Anda harus memberikan opacity seperti filter:alpha(opacity=50);

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

Ini adalah solusi transparansi untuk sebagian besar browser termasuk 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;
}

Solusi terbaik yang saya temukan sejauh ini adalah yang diusulkan oleh David J Marland di blognya , untuk mendukung opacity di browser lama (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;
}

Setelah mencari banyak, saya menemukan solusi berikut yang berfungsi dalam kasus saya:

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

* Penting: Untuk menghitung ARGB (untuk IE) dari RGBA, kita dapat menggunakan alat online:

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/