Odpowiedzi:
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.
1x1
: stackoverflow.com/questions/7764751/ ...
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 */
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;
}
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');
});
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!
rgba
? Czy też zawsze jest to wymagane przez wszystkich użytkowników i po prostu nie jest wyświetlane?
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);
}
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.
rgba()
do wersji 3, a Opera nie obsługiwał go do wersji 10.
Spóźniłem się na imprezę, ale dla każdego, kto to znajdzie - ten artykuł jest bardzo przydatny: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
Używa filtru gradientu, aby wyświetlić jednolity, ale przezroczysty kolor.
Aby używać rgba
tł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ń #33ffffff
według własnego uznania.
ARGB
dlaRGBA
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);
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;
}
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;
}
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:
rgba()
wartości kolorów nie są obsługiwane w IE 8.