CSS / 배경색만 투명하게 만들기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

배경색만 투명하게 하고 글자는 선명하게 유지하려면 opacity 대신 background-color의 색상 값에 알파를 지정합니다. 예를 들어 background-color: rgb(48 145 185 / 0.45)는 배경색을 45% 불투명하게 그리면서 요소의 글자와 테두리는 그대로 유지합니다.

opacity와 배경색 알파의 차이

opacity는 요소를 자식 내용과 함께 하나의 결과로 합성한 뒤 투명도를 적용합니다. 그래서 배경뿐 아니라 글자·아이콘·테두리까지 함께 흐려집니다. opacity가 있는 부모 안에서 자식에게 opacity: 1을 주어도 부모가 합성한 전체 결과의 투명도를 취소할 수 없습니다.

반면 색상의 알파는 그 색에만 적용됩니다. rgb(48 145 185 / 0.45)에서 앞의 세 숫자는 빨강·초록·파랑 성분이고, 슬래시 뒤의 0.45는 불투명도입니다. 0은 완전 투명, 1은 완전 불투명이며 백분율로도 지정할 수 있습니다. 0.45와 45%는 같은 의미입니다. 예전 쉼표 표기인 rgba(48, 145, 185, 0.45)도 같은 색을 표현합니다.

전체 예제: 같은 색으로 두 방법 비교하기

다음 코드를 background-alpha.html로 저장하고 브라우저에서 엽니다. 뒤쪽 줄무늬는 CSS 그라데이션으로 만들어 별도 이미지 파일이 필요하지 않습니다. 같은 기본 배경색을 사용하는 두 상자에서 전체 opacity와 배경색의 알파를 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>배경색 알파와 opacity 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .stage { max-width: 600px; padding: 20px; display: grid; gap: 20px;
      background: repeating-linear-gradient(45deg, #dce9f4 0 14px, #fff 14px 28px); }
    .card { padding: 20px; background-color: #3091b9; color: #153648;
      border: 2px solid #153648; }
    .card h2 { margin: 0 0 10px; font-size: 20px; }
    .card p { margin: 0; }
    .whole { opacity: 0.45; }
    .alpha { background-color: rgb(48 145 185 / 0.45); }
  </style>
</head>
<body>
<h1>배경만 투명하게 만들기</h1>
<div class="stage">
  <section class="card whole">
    <h2>opacity: 0.45</h2>
    <p>배경뿐 아니라 글자와 테두리도 함께 흐려집니다.</p>
  </section>
  <section class="card alpha">
    <h2>배경색의 알파: 0.45</h2>
    <p>줄무늬 배경이 비쳐도 글자와 테두리는 선명하게 유지됩니다.</p>
  </section>
</div>
</body>
</html>

첫 번째 상자는 글자와 테두리까지 흐려집니다. 두 번째 상자는 배경색 사이로 줄무늬가 비치지만 글자와 테두리는 불투명하게 남습니다. 텍스트의 color나 테두리 색에 별도 알파를 지정하지 않았기 때문에 나타나는 차이입니다.

이제 alpha 규칙의 0.45만 0.8로 바꾸어 보세요. 두 번째 상자의 파란 배경이 더 진해지고 뒤쪽 줄무늬가 덜 보이지만 글자와 테두리의 설정은 바뀌지 않습니다. 다시 0.45로 되돌린 뒤 0으로 바꾸면 배경색이 사라지고 글자·테두리만 남습니다. 확인 후 원래 값으로 복원합니다.

완전 투명·배경 이미지·가독성 확인하기

배경색을 완전히 투명하게 하려면 background-color: transparent를 사용할 수 있습니다. 이 값은 요소 자체나 클릭 영역을 없애는 것이 아니라 배경색을 투명하게 그립니다. 글자·테두리·배경 이미지가 있다면 그것까지 자동으로 사라지지는 않습니다.

background-color는 배경 이미지보다 뒤에 그려집니다. 따라서 같은 요소의 불투명한 배경 이미지가 색을 덮고 있으면 알파 값을 바꿔도 결과가 눈에 띄지 않을 수 있습니다. 이 방법은 배경색의 투명도를 정하는 것이며 사진 파일 자체의 불투명도를 바꾸는 방법은 아닙니다. 또한 background 단축 속성을 다른 곳에서 다시 지정하면 앞서 설정한 배경색이 초기화될 수 있으므로 개발자 도구의 최종 background-color를 확인합니다.

반투명 색은 뒤에 어떤 색이나 이미지가 놓이는지에 따라 실제 표시 색이 달라집니다. “알파를 적용했으니 글자는 항상 잘 보인다”고 판단하지 말고, 실제 배경의 밝은 부분과 어두운 부분 위에서 모두 읽기 쉬운지 확인하세요. 사진 위의 안내문처럼 배경 변화가 큰 곳에서는 더 진한 단색 배경이나 별도 내용 영역이 적합할 수 있습니다.

적용 범위는 MDN의 opacity 설명과 background-color 설명에서 확인할 수 있습니다.

CSS