qpress 2020년 1월 20일 47
opacity 속성은 배경색의 ‘Alpha’ 값을 부여하여 투명하게 만들어 줍니다.
div {
background-color: red;
opacity: 0.6;
}
opiacity 속성이 부여된 element의 모든 child element들에도 해당 속성이 적용 됩니다.
즉, 아래와 같이 특정 child element에 opacity 값을 다르게 부여해도 상위의 opacity 값이 적용됩니다.
.parent {
opacity:0.5;
}
.child {
opacity:1;
}
만약 배경 색깔은 반투명하게 하고, Text는 원래의 투명도를 유지하고 싶다면, opacity 속성이 아닌 ‘rgba’를 사용해야 합니다.
.origina{
background-color: rgb(76, 175, 80);
}
.origina-alpha{
background-color: rgba(76, 175, 80, 0.5);
}