[CSS] 이미지를 어둡게 하는 방법

jjee·2025년 8월 5일

CSS filter linear-gradient opacity rgba

CSS

목록 보기

21/24

썸네일

이미지를 어둡게 하는 방법

이미지를 어둡게 만드는 방법에 대해 알아보자.

방법

filter: brightness()
opacity, background-color
linear-gradient()
::before, rgba()

filter: brightness()

filter 속성에 brightness() 값을 이용하여 이미지 밝기를 조절할 수 있다.

<!-- index.html -->
<img src="./images/img1.jpg" />

/* style.css */
img {
	filter: brightness(0.7);
}

brightness 적용 비교
왼쪽은 brightness(0.7)을 적용한 이미지고 오른쪽은 원본이다.
이와 같이 밝기를 줄여서 이미지를 어둡게 만들어줄 수 있다.

opacity, background-color

opacity는 투명도를 조절하는 속성이다.
배경색을 바꾸는 background-color와 함께 사용하여 이미지를 어둡게 만들 수 있다.

<!-- index.html -->
<div class="div-wrap">
  <img src="./images/img1.jpg" />
</div>

/* style.css */
.div-wrap {
	background-color: #000;
}
img:first-child {
	opacity: 0.7;
}

opacity와 background-color 적용 비교
왼쪽은 opacity 0.7을 주고, 이미지를 감싸는 div에게 background-color를 검정색으로 적용한 이미지다.
이미지를 투명하게 만든 후 뒷배경에 어두운 색을 깔아서 이미지가 어두워지는 효과를 얻을 수 있다.

linear-gradient()

linear-gradient는 둘 이상의 색을 이용하여 색상 변화를 선형으로 부드럽게 표현할 수 있다.

<!-- index.html -->
<div class="div-wrap"></div>

/* style.css */
.div-wrap {
	width: 648px;
	height: 972px;
	background: linear-gradient(rgba(0, 0, 0, 0.5)),
	url(./images/img1.jpg) no-repeat center / cover;
}

linear-gradient 적용 비교
linear-gradient 값으로 반투명한 어두운 색상값을 넣어주고 콤마(,)를 이용하여 이미지 url 값을 이어주면 어두운 이미지를 만들 수 있다.

만약 이 안에 텍스트가 들어가더라도 텍스트와는 상관 없이 이미지만 어둡게 만들 수 있는 방법이다.

::before, rgba()

<!-- index.html -->
<div class="div-wrap"></div>

/* style.css */
.div-wrap {
	width: 648px;
	height: 972px;
	background: url(./images/img1.jpg) no-repeat 	center / cover;
	position: relative;
}
.div-wrap::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
}