Yanıtlar:
1x1 pikselden daha büyük (otuz nokta teşekkürler) ve arka planınızın şeffaflığına uygun bir png oluşturun.
DÜZENLEME: IE6 + desteğine geri dönmek için, png için bkgd öbek belirleyebilirsiniz, bu, desteklenmiyorsa gerçek alfa saydamlığının yerini alacak bir renktir. Örneğin gimp ile düzeltebilirsiniz.
1x1: stackoverflow.com/questions/7764751/…
IE'de RGBA ve HSLA arka planını simüle etmek için, aynı başlangıç ve bitiş rengine sahip bir gradyan filtresi kullanabilirsiniz (alfa kanalı, HEX değerindeki ilk çifttir)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */Bunun en iyisi olduğuna inanıyorum çünkü bu sayfada alfa saydam arka plan oluşturmanıza yardımcı olacak bir araç var:
" Çapraz tarayıcı alfa şeffaf arka plan CSS'si (rgba) " (* artık archive.org'a bağlanmıştır)
#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;
}şeffaf png görüntüsü IE 6'da çalışmaz, alternatifler şunlardır:
CSS ile:
.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;
}veya sadece jQuery ile yapın:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});Geç olmasına rağmen, bugün bunu kullanmak zorunda kaldım ve burada , rgba'nın çalışma şekline çok benzer şekilde dinamik olarak bir png dosyası oluşturmanıza izin verecek çok kullanışlı bir php betiği buldum .
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);Komut dosyası buradan indirilebilir: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
Herkes için mükemmel bir çözüm olmayabileceğini biliyorum, ancak çok fazla zaman kazandırdığı ve kusursuz çalıştığı için bazı durumlarda dikkate alınmaya değer. Umarım bu birine yardımcı olur!
rgbamı istenir ? Yoksa her zaman tüm kullanıcılar tarafından talep ediliyor ve gösterilmiyor mu?
CSS'de çoğunlukla tüm tarayıcı desteği RGBa kodu vardır, ancak yalnızca IE8 ve altındaki seviye RGBa css kodunu desteklemez. Bunun için çözüm burada. Çözüm için bu kodu izlemelisiniz ve sırasına göre gitmek daha iyidir, aksi takdirde istediğiniz gibi mükemmel çıktı elde edemezsiniz. Bu kod benim tarafımdan kullanılıyor ve çoğunlukla mükemmel. mükemmelse yorum yapın.
.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);
}Opaklığı değiştirmek için css kullanırsınız. IE ile başa çıkmak için aşağıdaki gibi bir şeye ihtiyacınız olacak:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}Ancak bununla ilgili tek sorun, kabın içindeki herhangi bir şeyin de 0.3 opaklık olacağı anlamına gelmesidir. Bu nedenle, HTML'nizi, içeriğinizi tutan şeffaf olanın içinde değil, başka bir kapsayıcıya sahip olacak şekilde değiştirmeniz gerekir.
Aksi takdirde png tekniği işe yarardı. Kendi başına sorunlara neden olabilecek IE6 için bir düzeltmeye ihtiyacınız olması dışında.
rgba()sürüm 3'e kadar desteklemiyordu ve Opera, sürüm 10'a kadar desteklemiyordu.
Partiye geç kaldım, ancak bunu bulan herkes için - bu makale çok yararlı: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
Düz ama saydam rengi görüntülemek için gradyan filtresini kullanır.
rgbaIE'de arka planı kullanmak için bir geri dönüş vardır.
Filtre özelliğini kullanmalıyız. o kullanırARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;bu geri dönüş rgba(255, 255, 255, 0.2)
#33ffffffSizinkine göre değiştirin .
ARGBiçinRGBAÇok basit bir şekilde önce rgb olarak artalan vermeniz gerekiyor çünkü Internet Explorer 8 rgba yerine rgb'yi destekleyecek ve sonra aşağıdaki gibi opaklık vermelisiniz. filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);Bu, IE x dahil çoğu tarayıcı için bir şeffaflık çözümü
.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;
}Şimdiye kadar bulduğum en iyi çözüm , eski tarayıcılarda (IE 6+) opaklığı desteklemek için kendi blogunda David J Marland tarafından önerilen çözümdür :
.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;
}Çok aradıktan sonra, benim durumumda çalışan aşağıdaki çözümü buldum:
.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;
}* Önemli: RGBA'dan ARGB'yi (IE'ler için) hesaplamak için çevrimiçi araçları kullanabiliriz:
rgba()renk değerleri IE 8'de desteklenmiyor.