한눈에 보는 정의
화면 요소가 얼마나 비쳐 보이는지 정하는 값. CSS에서는 0(완전 투명)부터 1(완전 불투명)까지로 쓴다.
이런 말로 들어요
- 사진 위에 검은 막을 50% 투명도로 깔면 글자가 잘 보일 거예요.
- 비활성 버튼은 흐리게(투명도 낮게) 처리했습니다.
그림으로 보기
상자 전체를 흐리게 할지 배경색만 비치게 할지에 따라 방법이 다릅니다. 상세 페이지에서 값을 직접 바꿔 볼 수 있습니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
가을 특강 모집
opacity: 0.5 상자 전체가 흐려져 글자도 흐려집니다.
가을 특강 모집
background: rgba(0,0,0,0.5) 배경색만 비치고 글자는 선명합니다.
자세히 알아보기
배경 위에 반투명 상자를 얹거나, 버튼을 누를 수 없는 상태로 흐리게 보여 줄 때 씁니다. CSS의 opacity는 요소 전체(안의 글자 포함)를 함께 투명하게 만듭니다. 배경색만 투명하게 하고 글자는 선명하게 두려면 투명도가 들어간 색 값을 배경에 따로 지정합니다.
실무 예시
예를 들어 배경 사진 위에 opacity 0.5인 검은 막을 덮으면 흰 제목 글자가 훨씬 잘 읽힙니다.
함께 살펴볼 점
요소 전체에 opacity를 주면 안의 글자도 흐려져 읽기 어려울 수 있습니다. 투명 처리 후 글자 대비가 충분한지 확인합니다. 완전히 투명해도 클릭은 될 수 있으니 숨길 때는 다른 방법을 씁니다.
AI에게 이렇게 요청해 보세요
히어로 배경 사진 위에 검은색 45% 반투명 오버레이를 깔아 줘. 글자는 흐려지지 않게 배경색 투명도로 처리하고 대비를 확인해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- opacity | MDN 새 창
MDN에서 opacity 값 범위(0~1)와 자식 요소까지 함께 투명해진다는 점을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정