부모 CSS 속성에서 하위를 제외하는 방법은 무엇입니까?

Question

css를 사용하여 요소의 불투명도에 대해 작업 중입니다. 단락은 div에 있지만 div의 불투명도를 0.4로 설정하면 단락에도 영향을줍니다. 이 단조로운 작업으로 opacity 1.0을 asigning하여 단락의 div를 무시하려고했습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

짧은 대답은 당신이 할 수 없다는 것입니다. 그것은 단지 불투명도가 작동하는 방법입니다.

답이 더 길면 실제로 무엇을 달성하려고 하는가에 달려 있습니다 (예전의 XY 문제).

예를 들어 div의 배경이 반투명하지만 단락이 아닌 경우 전체 div를 반투명하게 만드는 대신 반투명 배경을 사용하여 해결할 수 있습니다.

Answer 2

나는이 문제를 해결하기 위해 알고있는 유일한 방법은 콘텐츠와 배경을 분리하는 것입니다 :

<div id="container" style="position: relative;"> 
    <div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;">&nbsp;</div> 
    <div id="content">Your content here</div> 
</div> 

Answer 3

나는이 이전 했어요. 제가 기억한다면, position:absolute;을 innerDiv로 설정했기 때문에 불투명도 속성이 잘 작동합니다.

이 효과를 얻는 또 다른 방법은 불투명도 대신 알파로 outerDiv의 배경을 설정하는 것입니다. 예를 들어 :

.outerDiv{ 
    background-color: rgba(225,225,225,0.4); 
} 

네번째 값 변화

.outerDiv{ 
    background-color: white; //or #fff or rgb(255,255,255) 
    opacity: 0.4; 
} 

불투명도처럼 작동 알파이다. 그것은 div의 내용을 괴롭히지 않을 것입니다.