하위 DIV 불투명도에 영향을 주지 않고 상위 DIV 불투명도를 어떻게 제어할 수 있습니까?

하위 DIV에 영향을 주지 않고 상위 DIV의 불투명도 제어

웹 개발에서는 콘텐츠 명확성을 유지하면서 투명성 효과를 달성하는 것이 어려울 수 있습니다. 일반적인 요구 사항 중 하나는 하위 DIV의 불투명도에 영향을 주지 않고 상위 DIV에 불투명도를 설정하는 것입니다.

이 효과를 얻으려면 상위 DIV 내에서 CSS 불투명도 속성을 활용할 수 있습니다. 불투명도를 0에서 1 사이의 값으로 설정하면 상위 DIV 내 배경 콘텐츠의 투명도를 조절할 수 있습니다.

예:

아래 CSS 코드에서 , 상위 DIV의 불투명도를 0.5로 설정하여 배경 투명도를 50% 허용합니다. image:

.parent {
  background-image: url(../images/madu.jpg);
  opacity: 0.5;
}

불투명도를 사용하는 동안 하위 DIV 색상 유지

상위 DIV에서 불투명도를 설정하는 동안 하위 DIV의 검은색을 유지하려면 다음을 활용하세요. 하위 DIV 내의 CSS 속성:

.child {
  color: black;
  background-color: transparent;
}

하위에서 배경색을 투명하게 지정하여 DIV의 텍스트 색상은 상위 DIV의 투명도 효과에도 불구하고 그대로 유지됩니다.

위 내용은 하위 DIV 불투명도에 영향을 주지 않고 상위 DIV 불투명도를 어떻게 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!