웹 페이지 배경 투명도와 문자 투명도를 변경하는 방법 CSS

소개

CSS에서 opacity 속성이 아닌 rgba를 사용하여 투명도를 분리하는 방법을 작성합니다.
특히 HTML, CSS를 배우기 시작할 때는 opacity 속성을 배우고 배경을 투명하게 할 수 있다고 배우고 구현합니다.
그러나 opacity 속성을 사용하면 문자까지 동일한 투명도가 되어 버립니다.
배경은 조금 얇게 하고 싶지만 문자는 보이도록 하고 싶다. 라고 생각하기 쉽지만 이번에 기재하는 rgba를 사용하면 배경의 얇음과 문자의 얇음을 분리할 수 있으며, 둘 다 자신이 생각한 투명도로 표현할 수 있습니다.
바로 봅시다.

목차

소개
1. opacity
2. rgba
3. 결론

1. opacity

HTML 설명

HTML

<div class="job-me">
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
              </div>

CSS 설명

CSS
.job-me {
  height: 150px;
  width: 1000px;
  margin-left: 50px;
  background-color: white;
  opacity: 0.2;
  color: black;
}

이렇게 background-color:와 opacity:로 쓰면 이렇게 둘 다 얇아져 버립니다.
↓


그럼 rgba로 쓰자. HTML은 완전히 함께 있습니다.

2. rgba

HTML 설명

HTML

<div class="job-me">
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
              </div>

CSS 설명

CSS

.job-me {
  height: 150px;
  width: 1000px;
  margin-left: 50px;
  background-color: rgba($color: white, $alpha: 0.2);
  color: black;
}

명확하게 문자를 낼 수 있고,
깨끗하게 배경과 문자의 투명도를 조정할 수 있었습니다.

3. 결론

이것으로 일부러 opacity 프로퍼티를 사용하지 않아도 배경을 얇게 해 문자를 명확하게 표시할 수 있었습니다.
덧붙여서 rgba를 사용하면 배경의 얇음뿐만 아니라 문자 자체의 농도도 조정할 수 있습니다.
R(적색), 204/255 (80%)
G(녹색), 255/255 (100%)
B(파랑), 204/255 (80%)
처럼 문자에 따라 색이 정해져 있으므로 예와 같이 %를 스스로 결정하여 문자의 투명도도 조정할 수 있습니다.