버튼에 opacity를 주어 배경을 뿌옇게 만들고 싶습니다. 그러나 버튼의 텍스트는 선명하게 남아있어야 합니다.
UI에서 비활성화되는 동작을 나타내고 싶은 경우 opacity 속성을 이용하여 불투명도를 증가시킬 수 있습니다.
<button type="button" class="btn"><
span>Good Day</span></button>button.btn {
padding: 8px 12px;
border-radius: 12px;
font-size: 18px;
background-color: rgb(243, 172, 172);
font-weight: bold;
opacity: 0.3;
}
그런데 버튼 태그에 텍스트가 있거나, 하위 태그가 존재하는 경우에는 이 하위 태그 속성도 opacity를 먹게 됩니다. 버튼의 Good Day는 선명하게 보이도록 하고 싶기 때문에, 이를 오버라이딩 하기 위해 하위 태그에 opacity: 1을 줘보겠습니다.
button.btn {
padding: 8px 12px;
border-radius: 12px;
font-size: 18px;
background-color: rgb(243, 172, 172);
font-weight: bold;
opacity: 0.3;
}
span {
opacity: 1;
}
어라.. 결과는 그대로입니다!
왜일까요? Dom element에 opacity가 매겨질 경우 stacking context를 형성합니다. 또한 부모의 투명도는 하위 요소에 상속되지 않습니다. 즉 button 의 opacity 0.3은 span 요소에 상속되지 않습니다. 하지만 실제로는 span 요소는 button 요소 내부에 있으며 투명도 0.3인 button 요소의 뒤에 위치하게 됩니다. 이로 인해 span 요소가 흐릿하게 나타나게 됩니다. 이것은 상속이 아니고 스택 요소에 영향을 받는 것입니다.
그러면 여기서 span 요소에 z-index를 주어 앞으로 튀어나오게 만들어 볼 수 있지 않을까요?
span {
opacity: 1;
position: relative;
z-index: 1;
}
하지만.. 결과는 그대로입니다. z-index가 opacity를 이길 것 같지만 두 속성의 작용은 근본적으로 다릅니다. z-index는 position 속성이 적용된 요소의 스태킹 순서에 관여하지만, opacity는 모든 요소와 그 요소의 내용에 불투명도에 영향을 끼칩니다. opacity 요소의 자식이 z-index 요소를 가진다고 해도 여전히 opacity의 불투명도에 가려지게 됩니다.
button.btn {
padding: 8px 12px;
border-radius: 12px;
font-size: 18px;
background-color: rgba(243, 172, 172, 0.3); // Do this!
font-weight: bold;
}
z-index를 하위에 주거나 하위에 opacity를 오버라이딩 하려는 시도는 먹히지 않습니다. Opacity를 해당 요소의 background-color로 적용하는 방식으로 해결할 수 있습니다.
코드샌드박스: https://codesandbox.io/p/sandbox/opacity-zz7hws?file=%2Fstyles.css%3A12%2C1
