하위 요소에 대해 상속된 불투명도 재정의
CSS에서 요소는 상위 요소로부터 불투명도를 상속합니다. 하위 항목의 원래 모양을 유지하면서 상위 항목의 불투명도만 조정하려면 다음 접근 방식을 고려하세요.
1. 불투명도 계산:
불투명도 값은 곱셈입니다. 즉, 불투명도가 0.6인 상위 요소 내에서 불투명도가 0.5인 요소는 유효 불투명도가 0.3(0.5 * 0.6)이 됩니다.
예:
<code class="css">#parent { opacity: 0.6; } #child { opacity: 1; }</code>
이 예에서 #child 요소는 상위 요소에 반투명 불투명도가 있어도 불투명하게 나타납니다.
2. 하위 위치 변경:
가능하다면 #child 요소를 #parent 요소 외부로 이동하세요. 이렇게 하면 자식이 부모의 불투명도를 상속받지 못하게 됩니다.
3. 하위 요소에 RGBA 색상 사용:
상위 요소에 직접 불투명도를 설정하는 대신 하위 요소의 배경, 테두리 또는 글꼴에 RGBA 색상을 사용하세요. RGBA 색상은 불투명도를 네 번째 값으로 지정합니다.
<code class="css">#child { background-color: rgba(255, 165, 0, 0.5); }</code>
추가 참고 사항:
위 내용은 다음은 제공된 기사를 기반으로 한 몇 가지 질문 기반 제목입니다. 공식적인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!