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