답변:
1x1 픽셀 (30 도트 감사)보다 크고 배경의 투명도와 일치하는 png를 만듭니다.
편집 : IE6 + 지원을 위해 돌아가려면 png에 대해 bkgd 청크를 지정할 수 있습니다. 이것은 지원되지 않는 경우 진정한 알파 투명도를 대체 할 색상입니다. 예를 들어 김프로 수정할 수 있습니다.
1x1. stackoverflow.com/questions/7764751/…
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
나는 그것이 모든 사람에게 완벽한 해결책이 아닐 수도 있다는 것을 알고 있지만, 많은 시간을 절약하고 완벽하게 작동하기 때문에 어떤 경우에는 고려할 가치가 있습니다. 누군가에게 도움이되기를 바랍니다!
rgba합니까? rgba.php URL은 지원하지 않는 브라우저에서만 요청 합니까? 아니면 항상 모든 사용자가 요청하고 단순히 표시되지 않습니까?
대부분의 브라우저는 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에 대한 수정이 필요하지만 그 자체로 문제가 발생할 수 있습니다.
rgba()버전 3까지 지원하지 않았고 Opera는 버전 10까지 지원하지 않았습니다.
나는 파티에 늦었지만 이것을 발견하는 다른 사람들에게는 매우 유용합니다. http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
그라디언트 필터를 사용하여 단색이지만 투명한 색상을 표시합니다.
rgbaIE에서 배경 을 사용하려면 대체가 있습니다.
필터 속성을 사용해야합니다. 그 사용ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;이것은 폴백입니다 rgba(255, 255, 255, 0.2)
#33ffffff당신에 따라 변경 하십시오.
ARGB에 대한RGBA이것은 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;
}지금까지 찾은 최고의 솔루션은 David J Marland가 그의 블로그 에서 이전 브라우저 (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;
}많이 검색 한 후 내 경우에 작동하는 다음 솔루션을 찾았습니다.
.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;
}* 중요 : RGBA에서 ARGB (IE 용)를 계산하려면 온라인 도구를 사용할 수 있습니다.
rgba()IE 8에서는 색상 값이 지원되지 않습니다.