반응형
부모 요소에 opacity(불투명도) CSS속성이 적용되어있을때, 자식요소 또한 영향을 받게 된다.
See the Pen Opacity예시 by HamJeong (@HamJeong) on CodePen.
테스트를 해보면 알겠지만, 자식요소에 opacity를 별도로 주어도, 부모요소로 인해 적용된 불투명도를 무시할수는 없다. 이때, 부모요소의 opacity를 삭제하게되면 문제가 해결된다.
부모요소에 불투명도를 적용하는 방법이 꼭 opacity만 있는것은 아니니, rgba()색상값을 통해 불투명도를 적용하게 되면 문제가 해결된다는 의미이다. 코드의 예시와 그 결과는 아래와 같다.
See the Pen opacity02 by HamJeong (@HamJeong) on CodePen.
반응형
'HTML & CSS' 카테고리의 다른 글
| [CSS] 애니메이션 주기, cubic-bezier (0) | 2023.03.13 |
|---|---|
| [CSS] padding 사용 시, 부모 벗어나는 문제 (0) | 2023.03.13 |
| [CSS] 그라데이션 버튼 생성 (0) | 2022.11.21 |
| [CSS] 문자열 선택자 (2) | 2022.09.29 |
| [CSS] 상대경로, 절대경로 (0) | 2022.09.27 |
