2011-08-28 4 views
2

나는이 샘플을 가지고있다 : http://jsfiddle.net/funguy/jKfeQ/자녀에게 영향을 미치지 않는 부모에게 불투명도를 적용하는 방법은 무엇입니까?

혼란스러워하지 말고, 여기에 그것의 무언가가 있지만, 슬쩍 보인다. .postmorewrapper1에만 불투명도를 적용하고 .read-more1에는 불투명도를 적용하지 않습니다.

내가 어떻게 연락 할 수 있는지에 대한 조언이 있으십니까? 감사!

답변

3

당신은 할 수 없습니다, 당신은 그들 형제를 만들어 부모/자식을 에뮬레이트 할 위치해야합니다.

0

AlienWebguy에서 말했듯이, Opacity와 같은 CSS 속성을 사용하면 자식에 영향을주지 않고서도이 작업을 수행 할 수 없습니다.

당신이 정말로 그것을 자녀의 영향을주지 않고 부모의 불투명도를 변경해야하는 경우, 가장 좋은 는 아이들이 영향을받지 않을 것입니다 PNG 투명, 이런 식으로 부모의 배경 이미지를 교환을 것이다 속임수 부모의 불투명도가 변경된 것으로 보입니다.

0

문제는 opacity 속성이 모든 하위 요소에 적용된다는 것입니다. 대안으로 16 진수 값이 아닌 .postmorewrapper1으로 배경색을 지정할 때 rgba을 대신 사용할 수 있습니다. 그래서이 대신 :

background: #FCFCFC; 
opacity: 0.4; 

이 시도 :

background: rgba(252, 252, 252, 0.4) 

한 가지가이 기술을 명심하지만 IE 버전 아래 8은 RGBA를 지원하지 않는다는 것입니다 (그것은 V9에서 추가되었다). 이 문제를 해결 얻을 수있는 몇 가지 옵션이 있습니다 : (

  1. 사용 IE 버전 8 이하의 반투명 PNG 이미지 (있는 경우 남용 성능에 영향을 줄 수 있습니다) IE의 필터를 사용하는

옵션 1의 CSS는 것) 적은 유지 보수입니다 : 당신이 하나를 가지고 있다면 당신은 당신의 IE 스타일 시트에 그것을 넣어 것

background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC)"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC); /* IE6 & 7 */ 
zoom: 1; 

.

관련 문제