IE에서 작동하지 않는 rgba CSS 속성을 사용하여 테마 레이아웃 개발

CSS 테마 레이아웃을 사이트에 생성하는 동안 문제가 발생합니다. 요구 사항은 사용자가 사용자 지정된 테마에 기본 색상과 보조 색상을 선택한다는 것입니다. 그라디언트 이미지가 렌더링 될 불투명도 (또는 알파 값)로 렌더링 될 페이지의 블록입니다. 불투명도 CSS 속성을 사용할 때의 문제점은 모든 자식 요소가 우리가 원하는 것과 다른 불투명도 값을 상속한다는 것입니다. 반면에 rgba 속성을 사용하면 IE와의 호환성 문제가 발생합니다. 어떤 접근 방식을 취해야합니까?IE에서 작동하지 않는 rgba CSS 속성을 사용하여 테마 레이아웃 개발

/* HTML */ 
    <div class="someClass"> 
     Page Title 
</div> 

/* CSS */ 
.someClass{ 

    border-top:10px solid #b59a47; 
    border-bottom:5px solid #f4e196; 
    background-image: url(../../images/contentHeader-bg.png); 
    background-color: rgba(244,225,150,0.2); 
}

출처

2011-08-12 sumit kumar ray

IE8 이하의 필터를 사용해야합니다 (http://css-tricks.com/2151-rgba-browser-support/). –

이것은 내가 원하는 것이 아니며이 질문을 게시하기 전에 이미 읽었습니다. 좋은 접근 방식을 찾고 있습니다. –

이것은 좋은 접근 방법입니다. IE에서는 PNG 배경 이미지 또는 필터 항목 중 2 가지만 선택할 수 있습니다. 다른 선택의 여지가 없습니다. 이 기사에서는 두 가지 장단점을 보여줍니다. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/ –

모든 브라우저가 RGBa를 지원하지는 않으므로 디자인에서 허용하는 경우 "대체 색상"을 선언해야합니다. 이 색상은 솔리드 (완전히 불투명) 일 가능성이 큽니다. 대체를 선언하지 않으면 해당 색상을 지원하지 않는 브라우저에 색상이 적용되지 않습니다. 이 폴백은 일부 오래된 브라우저에서 실패합니다.

div { 
    background: rgb(200, 54, 54); /* The Fallback */ 
    background: rgba(200, 54, 54, 0.5); 
}

는 IE 6에서 속기를 사용하지 않도록 관련,하지만 this bug 알고 있나요 7.

출처

2011-08-12 17:25:15 anglimasS

모든 하위 요소에 불투명도를 개별적으로 설정하지 않는 경우 (불투명도 값을 상속하는 것이 문제인 경우)는 어떻게해야합니까?

.contentHeader { 
    opacity:0.2; 
    filter: alpha(opacity=20); /*for IE6-8*/ 
} 
.contentHeader * { 
    opacity:1; 
    filter: alpha(opacity=100); /*for IE6-8*/ 
}

는 일부 브라우저에서 작동하지 않는 경우

은 아이 스타일에 대한 !important를 추가하려고합니다.

출처

2011-08-12 17:19:53 VIK

할 수 있습니다 당신은 RGBA 색상을 사용하고 단지 시작에 대한 동일한 색상을 설정할 수는 그라데이션 필터를 사용하여 가짜 끝 :

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

출처

2011-08-12 17:29:27

20 %가 # 99000051이되지 않습니까? – JKirchartz

IE에서 작동하지 않는 rgba CSS 속성을 사용하여 테마 레이아웃 개발

답변

관련 문제