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

중첩 요소의 불투명도 제어

중첩 DIV 요소로 작업할 때 때로는 별도의 요소 없이 상위 요소의 불투명도를 조정하는 것이 바람직할 수 있습니다. 자녀에게 영향을 미칩니다. 이는 rgba() 함수와 함께 background-color CSS 속성을 사용하여 달성할 수 있습니다.

해결책:

DIV에 영향을 주지 않고 상위 DIV의 불투명도를 설정하려면 하위 DIV, 다음 CSS를 사용하십시오. 구문:

.parent {
  background-color: rgba(r, g, b, a);
}

설명:

background-color 속성은 요소의 배경색을 설정합니다. rgba() 함수를 사용하면 빨간색(r), 녹색(g) 및 파란색(b) 값을 사용하여 색상 구성 요소를 지정할 수 있습니다. 마지막 매개변수인 a는 알파 투명도를 나타냅니다. 이 값의 범위는 0(완전 투명)부터 1(완전 불투명)입니다.

예를 들어, 하위 DIV의 색상을 유지하면서 상위 DIV를 50% 투명하게 만들려면 다음 CSS를 적용하세요.

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}

참고: 이 기술은 상위 요소의 배경색에만 적용됩니다. 텍스트 색상이나 글꼴 크기 등 하위 DIV의 다른 시각적 속성에는 영향을 미치지 않습니다.

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