자식 요소의 CSS 불투명도

CSS에서 기술적으로 불가능한 자식 요소의 불투명도를 알고 있습니다. 나는 외부 요소의 여백을 음수로 설정하여 해결 방법을 사용하기를 원했지만 이제는 불투명도가 단순히 요소 위로 나타납니다. 대신 위의 코드를 배치하고 Z- 인덱스를 변경하지 않고 설정했습니다. http://jsfiddle.net/etP65/1/자식 요소의 CSS 불투명도

#sellbottom { 
    z-index:50 
margin: -114px 0; 
width: 135px; 
height: 60px; 
border-top: 1px solid #c8d5da; 
background-color: #96adb7; 
opacity: .8; 
padding: 30px 70px; 
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
filter: alpha(opacity=80); 
-moz-opacity: .8; 
-khtml-opacity: .8; 
} 

.orangebutton { 
margin: 30px 70px; 
z-index: 99999; 
opacity: 1; 
background-color:#62ffff; 
}

HTML Z- 인덱스에

<div class="orange-button"></div> 
<div id="sellbottom"></div>

출처

2014-06-12 user2126833

대신 rgba를 사용할 수 있습니까? 그것은 훨씬 쉬울 것입니다. –

불행히도, IE 8 커버리지가 필요하지 않기 때문에. – user2126833

IE 8에서 rgba에 대한 필터 폴백을 사용할 수 있습니다. 이것은 8 자리 16 진수 문자열로, 불투명도가 처음 두 자리입니다. 예를 들면 다음과 같습니다. filter : progid : DXImageTransform.Microsoft.gradient (startColorstr = # 50990000, endColorstr = # 50990000); –

사용하지 마십시오 "픽셀"

은 여기에 전체 JSFiddle를 참조하십시오. 단지 가치가 필요합니다. z- 인덱스 값을 사용하려면 요소를 배치해야합니다 (상대/절대).

"position : relative;" 오렌지 버튼에 대한 CSS를 -이 ie8뿐만 아니라 작동합니다 믿습니다.

.orangebutton { 
    margin: 30px 70px; 
    position: relative; 
    z-index: 99999;

출처

2014-06-12 17:59:36 Josh

자식 요소의 CSS 불투명도

답변

관련 문제