Непрозрачность фона CSS с rgba не работает в IE 8


Answers

для имитации фона RGBA и HSLA в IE вы можете использовать фильтр градиента с тем же начальным и конечным цветом (альфа-канал является первой парой в значении HEX)

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

Я использую этот CSS для непрозрачности фона <div> :

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

Он отлично работает в Firefox, но не в IE 8. Как заставить его работать?




прозрачное изображение png не будет работать в IE 6, альтернативы:

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

или просто сделайте это с помощью jQuery:

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



Лучшее решение, которое я нашел до сих пор, - это предложение, предложенное Дэвидом Дж Марландом в его blog , для поддержки непрозрачности в старых браузерах (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;
}



Я опаздываю на вечеринку, но для тех, кто это находит, эта статья очень полезна: calculator

Он использует градиентный фильтр для отображения сплошного, но прозрачного цвета.




это помогло мне решить проблему в IE8:

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

ура




Это очень просто, что вам нужно дать сначала, что вам нужно дать backgound как rgb, потому что Internet Explorer 8 будет поддерживать rgb вместо rgba, а затем u должен дать непрозрачность, например filter:alpha(opacity=50);

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



В CSS есть только код поддержки RGBa, поддерживающий браузер, но только IE8 и ниже уровня не поддерживают код RGBa css. Для этого вот решение. Для решения вы должны следовать этому коду, и лучше идти с его последовательностью, иначе вы не получите идеальный выход по своему усмотрению. Этот код используется мной, и это в основном идеально. комментируйте, если это прекрасно.

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