본문 바로가기
IT/HTML & CSS & JavaScript

[CSS] 배경색만 투명하게 만들기 (RGB)

by 베베야 2021. 9. 16.
728x90

CSS RGB속성을 이용하여 배경의 색만

변경하는 방법에 대해서 알아보겠습니다.

 


CSS에서 opacity 속성은 간단하게 배경의 투명도를 변경해주는 옵션입니다.

하지만 배경과 배경안에 적혀있는 문자를 모두 투명하게 만듭니다.

 

[CSS] 투명도 조절 방법 (opacity)

내가 지정한 색상에 CSS 스타일 옵션을 적용하여 투명도를 조절하는 방법에 대해서 알아보겠습니다. 투명도 설정(opacity) 태그에 배경색을 적용합니다. 그리고 투명도 옵션인 opacity 스타일에 추가

bebeya.tistory.com

 

RGB

background-color 사용시 RGB을 사용해서 변경하게 되면

문자의 투명도는 유지할 수 있습니다.

 

HTML코드

    <div>
        투명도를 조절해 보자
    </div>

CSS코드

div {
    padding: 100px;
    background-color: rgb(174, 238, 174);  
}

 

결과화면

문자의 투명도는 변경되지 않은 것을 볼 수 있습니다.

 

이상으로 CSS 배경색만 투명하게 만드는 방법에 대해서 

알아보았습니다.

반응형
그리드형

댓글