Opasitas latar belakang CSS dengan rgba tidak berfungsi di IE 8


110

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?

Jawaban:


73

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.


2
Ya. rgba()nilai warna tidak didukung di IE 8.
Paul D. Waite

11
Untuk menghindari kemungkinan masalah, gunakan ukuran apa pun selain 1x1: stackoverflow.com/questions/7764751/…
tiga puluhdot

43
Dapat diterima pada tahun 2003, tetapi tidak pada tahun 2013. Gunakan -ms-filter untuk dukungan simulasi di IE lama, atau, lebih baik lagi, abaikan saja. Orang yang menggunakan IE8- layak untuk dihukum dengan tidak melihat radius perbatasan, latar belakang transparan, dll.
Evgeny

21
@EugeneXa Saya bekerja untuk pelanggan saya, bukan sebaliknya. Jika mereka menggunakan IE8, maka saya mendukungnya. Menghukum calon pelanggan bukanlah bisnis yang baik.
Eli

14
@EugeneXa Hampir 10% di situs saya, dan mereka sering kali pelanggan yang baik. Tidak ada jawaban yang benar di sini. Lakukan perhitungan matematika dan cari tahu apa yang cocok untuk Anda. Bahkan 6% bisa jadi sangat besar untuk beberapa situs! Tidak ada pengguna yang pantas dihukum. Saya pikir Anda akan menyesali sikap itu.
Eli

241

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 */

2
ini berfungsi sebagai hadiah, kecuali sayangnya tampaknya berhenti berfungsi jika elemen disembunyikan secara dinamis dan ditampilkan kembali menggunakan jQuery ...
jackocnr

filter rgba IE sangat berguna dan saya bisa mengatasi> ie7
codingbbq

Berapa opasitas 0,6 untuk filter?
Si8

10
Kode hex untuk transparansi (pasangan pertama) dapat ditemukan di sini: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295

2
Ada kalkulator untuk nilai-nilai hex khusus IE!
nietonfir

14

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

Dan ingat selalu menggunakan warna hex RGBA dalam filter: eq # 004F80 adalah # ed004F80
user956584

9

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

24
Alfa latar belakang tidak sama dengan opasitas (tidak juga membuat elemen turunan menjadi transparan).
Alexey Smolyakov

1
Ini tidak menjawab pertanyaan dan juga tidak menerapkan CSS melalui jQuery (atau JavaScript secara umum) sebagai solusi crossbrowser.
mystrdat

7

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!


2
Bagaimana cara kerjanya - apakah URL rgba.php hanya diminta oleh browser yang tidak mendukung rgba? Atau apakah itu selalu diminta oleh semua pengguna, dan tidak ditampilkan?
Darren Cook

Harapan saya adalah browser akan secara otomatis melihat latar belakang kedua dan mengabaikan yang pertama, sebelum mencoba membuat permintaan. Tapi, itu tebakan paling cerdas.
Putar

7

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

5

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.


4
haha kasus tipikal dari satu browser yang tidak berfungsi seperti yang lain, dan setiap versi browser itu tidak bertindak seperti versi lain dari browser yang sama ... hanya Microsoft yang dapat mencapai ini dengan sangat sukses ...
ClarkeyBoy

3
@Paul D. Waite: Ada banyak sekali fitur yang ditawarkan browser selain cara mereka merender konten. Menyimpang dari spesifikasi bukanlah (atau tidak seharusnya) sebuah fitur.
Bobby Jack

@Paul D. Waite: Oke saya mengerti maksud Anda, tetapi yang saya maksud adalah bahwa versi IE yang berbeda bertindak begitu berbeda sehingga saya harus membuat lembar gaya yang berbeda untuk setiap versi ... Saya memiliki lembar gaya yang berbeda untuk IE6, 7 dan 8 ... namun saya hanya memiliki satu lembar gaya untuk semua FF / Chrome / Opera / Safari. @ Bobby Jack: Seconded ...
ClarkeyBoy

@ Bobby: Tentu, tetapi IE 8 tidak menyimpang dari standar lebih dari IE 7 atau IE 6, tentunya?
Paul D. Waite

@ ClarkeyBoy: tentu. Saya menemukan stylesheet IE 8 saya jauh lebih sederhana daripada stylesheet IE 6 saya. IE adalah browser yang paling aneh, tetapi perlahan-lahan menyesuaikan dengan yang lain. Firefox tidak mendukung rgba()hingga versi 3, dan Opera tidak mendukungnya hingga versi 10.
Paul D. Waite


2

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


Telah mencari konverter ARGB ke RGBA itu selamanya, Terima kasih! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin

1

ini berhasil bagi saya untuk menyelesaikan masalah di IE8:

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

Bersulang


1

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

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

0

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

0

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

0

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

0

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/
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.