IE 8에서 rgba가 작동하지 않는 CSS 배경 불투명도

IE 8에서 rgba가 작동하지 않는 CSS 배경 불투명도

---

이 CSS를 배경 불투명도에 사용하고 있습니다 <div>:

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

Firefox에서는 제대로 작동하지만 IE 8에서는 작동하지 않습니다. 어떻게 작동합니까?

---

1x1 픽셀보다 크고 (감사합니다) 배경의 투명도와 일치하는 PNG를 만듭니다.

편집 : IE6 + 지원으로 돌아가려면 png에 bkgd 청크를 지정할 수 있습니다. 지원되지 않는 경우 진정한 알파 투명도를 대체하는 색상입니다. 김프 등으로 고칠 수 있습니다.

---

IE에서 RGBA 및 HSLA 배경을 시뮬레이션하려면 동일한 시작 및 끝 색상으로 그라디언트 필터를 사용할 수 있습니다 (알파 채널은 HEX 값의 첫 번째 쌍입니다)

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

---

이 페이지에는 알파 투명 배경을 생성하는 데 도움이되는 도구가 있기 때문에 이것이 가장 좋습니다.

http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css

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

---

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

---

말했지만, 나는 오늘 사용했다 매우 유용한 PHP 스크립트를 발견 여기에 그 많은 방법 RGBA의 작품처럼 동적으로 PNG 파일을 만들 수 있습니다.

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

이 스크립트는 http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip에서 다운로드 할 수 있습니다.

모든 사람에게 완벽한 솔루션은 아닐 수도 있지만 많은 시간을 절약하고 완벽하게 작동하기 때문에 어떤 경우에는 고려해 볼 가치가 있습니다. 누군가를 돕는 희망!

---

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

---

css를 사용하여 불투명도를 변경합니다. IE에 대처하려면 다음과 같은 것이 필요합니다.

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

그러나 이것의 유일한 문제는 컨테이너 내부의 모든 것이 0.3 불투명도라는 것을 의미합니다. 따라서 투명 컨테이너 내부가 아닌 콘텐츠를 보유하는 다른 컨테이너를 갖도록 HTML을 변경해야합니다.

그렇지 않으면 png 기술이 작동합니다. IE6에 대한 수정이 필요한 경우를 제외하고는 그 자체로 문제가 발생할 수 있습니다.

---

I'm late to the party, but for anyone else who finds this - this article is very useful: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

It uses the gradient filter to display solid but transparent colour.

---

To use rgba background in IE there is a fallback.

We have to use filter property. that uses ARGB

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

this is fallback for rgba(255, 255, 255, 0.2)

Change #33ffffff according to yours.

How to calculate ARGB for RGBA

---

this worked for me to solve the problem in IE8:

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

Cheers

---

This solution really works, try it. Tested in IE8

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

---

It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like filter:alpha(opacity=50);

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

---

This a transparency solution for most browsers including 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;
}

---

The best solution I found so far is the one proposed by David J Marland in his blog, to support opacity in old browsers (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;
}

---

After searching a lot, I found the following solution which is working in my cases:

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

*Important: To calculate ARGB(for IEs) from RGBA, we can use online tools:

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/

참고URL : https://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8