IE 8의 포함 된 요소에 영향을주지 않고 div 배경의 불투명도?

112

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)

또한.

css  internet-explorer-8  opacity 
— 고 빈드 말 비야
소스
당신은 이것을 할 수 없습니다. 속성 불투명도는 요소의 모든 콘텐츠 (기타 html 요소 + 텍스트)에 영향을줍니다. 그러나 나는 왜 당신이 png를 사용하고 싶지 않은지 이해하지 못합니다. 이미지를 함께 변경하기
— 만하면
@Corum : 당신이 얼마나 틀렸는 지 (나만큼). 것이 가능하다. 이 블로그 게시물을 확인하십시오. robertnyman.com/2010/01/11/… 놀랍도록 영리합니다.
— Robert Koritnik 2011
방금 게시 : < stackoverflow.com/a/11755175/1491212 > 도움이 될 수 있습니다.
— Armel Larcier

답변:

236

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를 사용하려면 -pie-backgroundCSS와 PIE behavior스타일에 특정 선언 을 추가해야합니다. 그러면 스타일 시트가 다음과 같이 표시됩니다.

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

도움이되기를 바랍니다.

[편집하다]

다른 사람들이 언급했듯이 그 가치 filter를 위해 gradient키워드 와 함께 IE의 스타일을 사용할 수 있습니다 . CSS3Pie 솔루션은 실제로 이와 동일한 기술을 백그라운드에서 사용하지만 IE의 필터를 직접 처리 할 필요가 없으므로 스타일 시트가 훨씬 깔끔합니다. (또한 다른 멋진 기능도 많이 추가하지만이 토론과는 관련이 없습니다)

— Spudley
소스
1
훌륭한! 이것은 저에게 많은 도움이되었습니다.
— Jordan Starrk
22

당신 만이 할 수있는 것은 간단합니다

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 */

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

— Sandeep
소스
1
그라디언트는 불투명도와 어떤 관련이 있습니까? : S
— Robert Koritnik 2011
@Robert Koritnik는 : 더 나은 설명이 답변의 내 버전을 참조하십시오 - stackoverflow.com/questions/5160419/...을 여기 : stackoverflow.com/questions/4788564/...
— thirtydot
@robert, 웹에서 사용할 수있는 유일한 IE 필터이며 rgba가 준 것과 동일한 효과를 주며 필터 전문가가 아닙니다.
— sandeep 2011-04-14
@Robert 그것은 그냥 작동합니다;) 이 링크를 참조하십시오 -@sandeep 필요한 성분 (투명한 배경 및 hasLayout)을 추가하고 필터 순서를 변경하기 위해 필터 코드를 수정했습니다. 동의하지 않으면 롤백 할 수 있습니다.;)
— clairesuzy
1
@sandeep 필터는 hasLayout 없이는 작동하지 않습니다. 코드에 다른 hasLayout 속성이있을 수 있습니다. 나는 그러므로 내 느린 응답을 내 손목을 하나-handed..broke 작동하지만, 여기있어 jsfiddle 두 가지 방법의 비교를 위해 조건부 주석의 관련 IE 코드
— clairesuzy
8

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

하위 항목으로도 계단식으로 전달되지 않는 특정 요소에 대해서는 실제로 불투명도를 설정할 수 없습니다. 그것은 CSS가 opacity작동 하는 방식이 아닙니다 .

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

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

그런 다음 position: absolute/relative콘텐츠 형제가 그 위에 렌더링되도록 투명하게 설정해야 합니다.

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

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

그러나 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. 그러나이 두 요소는 형제 자매 나 그 어떤 것과도 관련이 없습니다. 표시되어야하는대로 표시됩니다. 하나 이상.

— 로버트 코 리트 닉
소스
이 경우에도 BG-이미지 작업, 정답입니다
— Botea 플로린
1

이 접근 방식은 어떻습니까?

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>
스 니펫 확장

— 다니엘
소스
0

좀 더 간단한 대답이있을 수 있습니다. background-color 와 같이 코드에 원하는 배경색을 추가해보세요 . #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}
— 미구엘 안젤 데 라 마르타
소스
2
콘텐츠에도 영향을 미치고 있습니다!
— Germa Vinsmoke
0

절대 위치가 아닌 위치에서 불투명도 기능을 사용할 때 전체 하위 div에 영향을줍니다. 그래서 그것을 달성하는 또 다른 방법은 div를 서로 안에 넣지 않고 div에 절대 위치를 사용하는 것입니다. 상위 div에 배경색을 사용하지 마십시오.

— 아르 민 파라 알-사다
소스
0

RGBA를 사용하거나 코드를 16 진수 한 다음 rgba로 변경하십시오. presodu 요소 css 를 수행 할 필요가 없습니다 .

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

또는

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;
— 가 젠더 싱
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.