Tag: parent node

자식 노드에 상속되는 opacity와 단독적인 rgba

부모 노드에 opacity 효과를 주면 자식 노드에도 상속되어 투명 효과가 함께 적용됩니다.

자동으로 상속이 되므로 다음과 같이 표시됩니다.

아래 설정으로 색상을 지정한 결과입니다.
배경 black
opacity:0.5
background:yellow
background:red

보다시피 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);

이제 자식 노드는 opacity가 적용되지 않으므로 색상이 선명해진 것을 확인할 수 있습니다.

검은 배경을 사용해도 자식 노드에 선명도가 살아난 것을 확인할 수 있으며 이를 통해 상속되지 않는다는 것을 알 수 있습니다.

테스트에 사용한 코드는 다음과 같습니다.

<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;
}