Przezroczystość tła CSS z rgba nie działa w IE 8


110

Używam tego CSS do nieprzezroczystości tła <div>:

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

Działa dobrze w Firefoksie, ale nie w IE 8. Jak to zrobić?

Odpowiedzi:


73

Utwórz plik png większy niż 1 x 1 piksel (dzięki trzydziestu kropkom), który będzie pasował do przezroczystości tła.

EDYCJA: aby wrócić do obsługi IE6 +, możesz określić fragment bkgd dla png, jest to kolor, który zastąpi prawdziwą przezroczystość alfa, jeśli nie jest obsługiwany. Możesz to naprawić za pomocą gimp np.


2
Tak. rgba()wartości kolorów nie są obsługiwane w IE 8.
Paul D. Waite

11
Aby uniknąć potencjalnego problemu, użyj rozmiaru innego niż 1x1: stackoverflow.com/questions/7764751/ ...
thirtydot

43
Byłoby do zaakceptowania w 2003 roku, ale nie w 2013. Albo użyj -ms-filter do nieco symulowanego wsparcia w starym IE, albo, jeszcze lepiej, po prostu go zignoruj. Osoby korzystające z IE8 - zasługują na karę, nie widząc promienia obramowania, przezroczystego tła itp.
Evgeny

21
@EugeneXa Pracuję dla moich klientów, a nie na odwrót. Jeśli używają IE8, to je obsługuję. Karanie potencjalnych klientów nie jest dobrym interesem.
Eli

14
@EugeneXa W moich witrynach jest bliżej 10% i często są to dobrzy klienci. Nie ma tu jednej właściwej odpowiedzi. Policz matematykę i dowiedz się, co działa w Twoim przypadku. W przypadku niektórych witryn nawet 6% może mieć znaczenie! Żaden użytkownik nie zasługuje na karę. Myślę, że pożałujesz takiej postawy.
Eli

241

aby zasymulować tło RGBA i HSLA w IE, można użyć filtru gradientowego, z tym samym kolorem początkowym i końcowym (kanał alfa to pierwsza para w wartości HEX)

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

2
działa to nieźle, ale niestety wydaje się, że przestaje działać, jeśli element jest dynamicznie ukrywany i ponownie wyświetlany za pomocą jQuery ...
jackocnr

Filtr rgba IE był bardzo przydatny i udało mi się obejść> ie7
codingbbq

Jaka jest nieprzezroczystość filtra 0,6?
Si8,

10
Kody szesnastkowe dla przezroczystości (pierwsza para) można znaleźć tutaj: ( stackoverflow.com/questions/15852122/hex-transparency-in-colors )
user1794295

2
Istnieje kalkulator dla tych niestandardowych wartości szesnastkowych IE!
nietonfir

14

Uważam, że jest to najlepsze rozwiązanie, ponieważ na tej stronie znajduje się narzędzie, które pomoże Ci wygenerować tło przezroczyste alfa:

CSS z przezroczystym tłem alfa w różnych przeglądarkach (rgba)(* teraz link do 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;
}

I pamiętaj, zawsze używaj koloru szesnastkowego RGBA w filtrze: eq # 004F80 to # ed004F80
user956584

9

przezroczysty obraz png nie będzie działał w IE 6-, alternatywami są:

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

lub po prostu zrób to z jQuery:

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

24
Alfa tła to nie to samo, co krycie (nie powoduje również, że element potomny jest przezroczysty).
Alexey Smolyakov

1
To nie jest ani odpowiedzią na pytanie, ani CSS stosowany przez jQuery (lub ogólnie JavaScript) nie jest rozwiązaniem crossbrowser.
mystrdat

7

Choć późno, musiałem użyć tego dzisiaj i znalazłem bardzo przydatny skrypt php tutaj , że będzie można dynamicznie utworzyć plik PNG, podobnie jak sposób działania RGBA.

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

Skrypt można pobrać tutaj: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

Wiem, że może to nie być idealne rozwiązanie dla wszystkich, ale w niektórych przypadkach warto to rozważyć, ponieważ oszczędza dużo czasu i działa bez zarzutu. Mam nadzieję, że to komuś pomoże!


2
Jak to działa - czy adres URL rgba.php żądają tylko przeglądarki, które nie obsługują rgba? Czy też zawsze jest to wymagane przez wszystkich użytkowników i po prostu nie jest wyświetlane?
Darren Cook

Mam nadzieję, że przeglądarka automatycznie zobaczy drugie tło i zignoruje pierwsze, zanim spróbuje wysłać żądanie. Ale to co najwyżej wyuczone przypuszczenie.
Swivel

7

Większość przeglądarek obsługuje kod RGBa w CSS, ale tylko IE8 i poniżej nie obsługują kodu css RGBa. To tutaj jest rozwiązanie. W przypadku rozwiązania musisz postępować zgodnie z tym kodem i lepiej jest postępować zgodnie z jego sekwencją, w przeciwnym razie nie uzyskasz doskonałego wyniku, tak jak chcesz. Ten kod jest używany przeze mnie i jest w większości doskonały. skomentuj, jeśli jest doskonały.

.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

Używasz CSS do zmiany krycia. Aby poradzić sobie z IE, potrzebujesz czegoś takiego:

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

Ale jedyny problem polega na tym, że oznacza to, że wszystko wewnątrz pojemnika będzie miało również nieprzezroczystość 0,3. Dlatego będziesz musiał zmienić swój kod HTML, aby mieć inny pojemnik, a nie przezroczysty, który przechowuje zawartość.

W przeciwnym razie działałaby technika png. Tyle że potrzebujesz poprawki dla IE6, która sama w sobie może powodować problemy.


4
haha typowy przypadek jednej przeglądarki nie działającej jak reszta, a każda wersja tej przeglądarki nie działa jak inne wersje tej samej przeglądarki ... tylko Microsoft mógł to osiągnąć z takim sukcesem ...
ClarkeyBoy

3
@Paul D. Waite: Jest wiele, wiele funkcji, które oferują przeglądarki oprócz sposobu renderowania treści. Odchylenie od specyfikacji nie jest (lub nie powinno być) funkcją.
Bobby Jack

@Paul D. Waite: Ok, rozumiem twój punkt widzenia, ale mam na myśli to, że różne wersje IE działają tak różnie, że muszę stworzyć inny arkusz stylów dla każdej wersji ... Mam różne arkusze stylów dla IE6, 7 i 8 ... ale mam tylko jeden arkusz stylów dla wszystkich FF / Chrome / Opera / Safari. @Bobby Jack: Oddelegowany ...
ClarkeyBoy

@Bobby: Jasne, ale IE 8 nie odbiega od standardów bardziej niż IE 7 czy IE 6, na pewno?
Paul D. Waite

@ClarkeyBoy: jasne. Uważam jednak, że mój arkusz stylów IE 8 jest o wiele prostszy niż mój arkusz stylów IE 6. IE to najdziwniejsza przeglądarka, ale powoli dopasowuje się do innych. Firefox nie obsługiwał go rgba()do wersji 3, a Opera nie obsługiwał go do wersji 10.
Paul D. Waite


2

Aby używać rgbatła w IE, istnieje rozwiązanie awaryjne.

Musimy użyć właściwości filtra. który używaARGB

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

to jest rozwiązanie zastępcze dla rgba(255, 255, 255, 0.2)

Zmień #33ffffffwedług własnego uznania.

Jak obliczyć ARGBdlaRGBA


Od zawsze szukałem tego konwertera ARGB na RGBA, dzięki! web.archive.org/web/20131207234608/http://kilianvalkhof.com/…
Justin

1

to pomogło mi rozwiązać problem w IE8:

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

Twoje zdrowie


1

To rozwiązanie naprawdę działa, wypróbuj. Przetestowano w IE8

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

0

Po prostu musisz najpierw podać tło jako rgb, ponieważ Internet Explorer 8 obsługuje rgb zamiast rgba, a następnie musisz podać krycie, takie jak filter:alpha(opacity=50);

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

0

To rozwiązanie zapewniające przejrzystość dla większości przeglądarek, w tym 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

Najlepszym rozwiązaniem, jakie do tej pory znalazłem, jest to, które zaproponował David J Marland na swoim blogu , aby wspierać krycie w starych przeglądarkach (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

Po wielu poszukiwaniach znalazłem następujące rozwiązanie, które działa w moich przypadkach:

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

* Ważne: aby obliczyć ARGB (dla IE) z RGBA, możemy skorzystać z narzędzi 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/
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.