CSS에서는 filter 속성의 blur() 함수를 사용하면 배경 이미지에 부드러운 흐림(블러) 효과를 손쉽게 적용할 수 있습니다. 여기에 반투명한 오버레이 박스를 함께 사용하면 텍스트 가독성까지 높일 수 있어, 랜딩 페이지나 히어로 섹션 디자인에 널리 활용됩니다.
흐릿한 배경 이미지 만들기 핵심 원리
핵심은 filter: blur(10px); 한 줄입니다. 배경 이미지가 들어간 요소에 이 속성을 지정하면 해당 요소 전체가 흐려지며, 값이 클수록 흐림 정도가 강해집니다. 아래 예제 코드를 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body,
html {
height: 100vh;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.backgroundImage {
background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
filter: blur(10px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.transparentText {
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: 3px solid #f1f1f1;
position: absolute;
top: 40%;
left: 30%;
width: 50%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="backgroundImage"></div>
<div class="transparentText">
<h1>I am Shawn</h1>
<h1>I am a web developer</h1>
</div>
</body>
</html>코드 설명
1. 배경 이미지 설정 (.backgroundImage)
background-image로 이미지를 불러오고, background-size: cover;와 background-position: center;를 지정해 화면 전체를 꽉 채우도록 했습니다. filter: blur(10px);가 바로 이미지를 흐리게 만드는 부분입니다.
2. 반투명 텍스트 박스 (.transparentText)
rgba(0, 0, 0, 0.4)로 검은색 반투명 배경을 만들고, position: absolute;와 top, left 값을 조정해 화면 중앙 근처에 배치했습니다. 흰색 텍스트와 연한 테두리를 더해 시각적 대비를 강화했습니다.
실행 결과
위 코드를 실행하면 흐릿하게 처리된 배경 이미지 위에 반투명한 어두운 박스가 나타나고, 그 안에 흰색 텍스트가 선명하게 표시됩니다.
참고 팁
blur()를 적용하면 요소 가장자리까지 함께 흐려져 경계가 뿌옇게 보일 수 있습니다. 이 경우 컨테이너에 overflow: hidden;을 적용하고 내부 요소를 살짝 확대(transform: scale(1.05);)하면 깔끔한 결과물을 얻을 수 있습니다.