css 선택자 - IE 8에 포함 된 요소에 영향을주지 않으면 서 div의 배경이 불투명합니까?




여러개 복합 (7)

어쩌면 더 간단한 대답이 될 수도 있습니다. 배경색과 같은 코드에 배경색을 추가하십시오 : #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

IE 8에 포함 된 요소에 영향을주지 않으면 서 div의 배경을 불투명하게 설정하고 싶습니다. 모든 솔루션을 가지고 있고 1 x 1 .png 이미지를 설정하고 해당 이미지의 불투명도를 설정하는 데 응답하지 않습니다. 동적 불투명도 및 색상 관리를 사용할 수 있기 때문에 관리자가 변경할 수 있습니다. 그

나는 그것을 사용했지만 IE 8에서는 작동하지 않는다.

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

rgba(0,0,0,0.3)

또한.


절대 위치가 아닌 위치로 불투명도 기능을 사용하면 전체 하위 div에 영향을줍니다. 다른 방법으로 div를 내부에 넣지 않고 div에 절대 위치를 사용하지 않도록합니다. 상위 div에 대한 배경색을 사용하지 마십시오.


opacity 스타일은 전체 요소와 그 안의 모든 요소에 영향을줍니다. 이에 대한 정답은 대신 rgba 배경색을 사용하는 것입니다.

CSS는 매우 간단합니다.

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... 처음 세 숫자는 배경색의 빨강, 녹색 및 파랑 값이고 네 번째 숫자는 opacity 값과 같은 방식으로 작동하는 '알파'채널 값입니다.

자세한 정보는이 페이지를 참조하십시오 : http://css-tricks.com/rgba-browser-support/

아래쪽은 IE8 이하에서는 작동하지 않는다는 것입니다. 위에 링크 된 페이지는 작동하지 않는 몇 가지 다른 브라우저를 나열하지만, ​​지금은 모두 매우 오래된 브라우저입니다. IE6 / 7 / 8을 제외한 현재 사용중인 모든 브라우저는 rgba 색상으로 작동합니다.

좋은 소식은 CSS3Pie 라고하는 해킹을 사용하여 IE가 이것을 사용하도록 강제 할 수 있다는 것입니다. CSS3Pie는 rgba 배경색을 포함하여 이전 버전의 IE에 최신 CSS3 기능을 추가합니다.

배경에 CSS3Pie를 사용하려면 CSS에 특정 -pie-background 선언과 PIE behavior 스타일을 추가해야합니다. 이렇게하면 스타일 시트가 다음과 같이 보입니다.

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

희망이 도움이됩니다.

[편집하다]

다른 사람들이 언급했듯이, gradient 키워드를 사용하여 IE의 filter 스타일을 사용할 수 있습니다. CSS3Pie 솔루션은 실제로이 기술을 배경으로 사용하지만 IE의 필터로 직접 처리 할 필요가 없으므로 스타일 시트가 훨씬 깔끔합니다. (또한 다른 멋진 기능들도 추가되었지만이 토론과는 관련이 없습니다)


부모 요소의 opacity 가 전체 하위 DOM 트리에 대해 설정합니다.

자손에게도 종속되지 않는 특정 요소에 대해서는 불투명도를 설정할 수 없습니다. CSS opacity 가 어떻게 작동하는지 두렵습니다.

당신이 할 수있는 것은 하나의 컨테이너에 2 개의 형제 요소를두고 투명한 위치를 설정하는 것입니다.

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

당신은 투명한 position: absolute/relative 를 설정해야합니다 position: absolute/relative 내용을 가진 형제가 그 위에 그려 질 것입니다.

rgba 는 컬러 배경의 배경 투명도를 수행 할 수 있습니다.

요소의 background-color 에 대한 rgba 색상 설정은 물론 작동하지만 배경색 만 사용하도록 제한합니다. 이미지가 없습니다. 두려워요. 물론 rgba 에서 그래디언트 중지 색상을 제공하는 경우에도 CSS3 그래디언트를 사용할 수 있습니다. 그것도 잘 작동합니다.

그러나 rgba 는 필요한 브라우저에서 지원되지 않을 수 있습니다.

경고없는 모달 대화 상자 기능

그러나 전체 페이지를 어떤 종류의 마스킹을 마친 후에는 일반적으로이 스타일 세트와 함께 별도의 div 를 추가하여 수행합니다.

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

그런 다음 콘텐츠를 표시 할 때 더 높은 z-index 이 있어야합니다. 그러나이 두 요소는 형제 또는 다른 점에서 관련이 없습니다. 그들이해야하는 것처럼 표시됩니다. 하나씩.


그것은 간단합니다.

background: rgba(0,0,0,0.3)

& IE의 경우이 필터 사용

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

여기에서 rgba 필터를 생성 할 수 있습니다. http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/


포함 된 요소에서 Z- 색인을 더 높게 설정하십시오.


내부 div가 중첩 된 div의 불투명도 (100 % 불투명도)의 100 %를 가지기 때문입니다.

이를 피하기 위해 할 수있는 일이 몇 가지 있습니다.

다음과 같이 두 개의 별도 div를 작성할 수 있습니다.

<div id="background"></div>
<div id="bContent"></div>

hte 배경에 원하는 CSS 불투명도 및 기타 속성을 설정하고 z- 색인 속성 ( z-index )을 사용하여 bContent div의 스타일을 지정하고 위치를 지정하십시오. 이것으로 백그라운드 div의 div overtope를 놓을 수 있습니다.

또 다른 옵션은 RGBa 입니다. 이렇게하면 div를 중첩하고 div 특정 불투명도를 유지할 수 있습니다.

마지막 옵션은 원하는 이미지 편집기로 원하는 색상의 반투명 .png 이미지를 만들고 이미지의 URL에 배경 이미지 속성을 설정하면 걱정할 필요가 없습니다. CSS와 함께 중첩 된 div 구조의 기능과 구성을 잃어 버렸습니다.





css internet-explorer-8 opacity