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

Program / 글쓴이

의 배경 불투명도를 위해이 CSS를 사용하고 있습니다 <div>.

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

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

답변

1×1 픽셀 (30 도트 감사)보다 크고 배경의 투명도와 일치하는 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 */

답변

이 페이지에는 알파 투명 배경을 생성하는 데 도움이되는 도구가 있기 때문에 이것이 최고라고 생각합니다.

” 크로스 브라우저 알파 투명 배경 CSS (rgba) ” (* 이제 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;
}

답변

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

답변

늦었지만 오늘 그것을 사용해야했고 여기 에서 rgba가 작동하는 방식과 매우 유사하게 png 파일을 동적으로 생성 할 수 있는 매우 유용한 PHP 스크립트를 찾았습니다 .

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에 대한 수정이 필요하지만 그 자체로 문제가 발생할 수 있습니다.