자식 노드에 상속되는 opacity와 단독적인 rgba
![](https://i0.wp.com/choonse.com/wp-content/uploads/2022/09/DSC_6149.jpg?resize=628%2C353&ssl=1)
부모 노드에 opacity 효과를 주면 자식 노드에도 상속되어 투명 효과가 함께 적용됩니다.
자동으로 상속이 되므로 다음과 같이 표시됩니다.
아래 설정으로 색상을 지정한 결과입니다.
배경 black
opacity:0.5
background:yellow
background:red
![](https://i0.wp.com/choonse.com/wp-content/uploads/2022/09/1111.png?resize=437%2C77&ssl=1)
보다시피 yellow, red에 opacity가 적용되어 색상이 흐려진 것을 볼 수 있습니다.
그렇다면 이 상속 문제를 해결하기 위해서는 어떻게 해야 할까요?
간단하게 opacity 대신 rgba를 사용하면 됩니다.
투명도를 포함하는 색상의 지정은 다음과 같습니다.
rgba(R, G, B, opacity);
다음과 같이 사용할 수 있습니다.
위 박스에 해당하는 색상인 #9ADFFD을 rgba 방식으로 표현해보겠습니다.
16진수를 10진수로 변형한 값인 9A=154, DF=223, Fd=253을 각각 R, G, B 위치에 넣어주고 마지막 인수는 0~1 사이의 값을 넣어주면 됩니다.
background : rgba(154, 223, 253, 0.5);
![](https://i0.wp.com/choonse.com/wp-content/uploads/2022/09/스크린샷-2022-09-22-오후-11.17.56.png?resize=440%2C79&ssl=1)
이제 자식 노드는 opacity가 적용되지 않으므로 색상이 선명해진 것을 확인할 수 있습니다.
![](https://i0.wp.com/choonse.com/wp-content/uploads/2022/09/스크린샷-2022-09-22-오후-11.21.08.png?resize=439%2C77&ssl=1)
검은 배경을 사용해도 자식 노드에 선명도가 살아난 것을 확인할 수 있으며 이를 통해 상속되지 않는다는 것을 알 수 있습니다.
테스트에 사용한 코드는 다음과 같습니다.
<div class="div0"> <div class="div1"> modify </div> <div class="div2"> delete </div> </div> .div0{ height:100px; background : rgba(0, 0, 0, 0.5); display:flex; justify-content:center; align-items:center; } .div1{ width:200px; height:50px; background-color:gold; display:flex; justify-content:center; align-items:center; color:white; } .div2{ width:200px; height:50px; background-color:red; display:flex; justify-content:center; align-items:center; color:white; }