opacity 함수

opacity 함수는 배경 이미지의 투명도를 변경할 수 있게 해줍니다. 100% 또는 1 값은 이미지에 원래 투명도를 유지시킵니다. 0 값은 이미지가 완전히 투명해짐을 의미합니다. 이 범위 내의 모든 숫자는 배경의 부분적 투명도를 설정합니다. 음수 값은 설정할 수 없습니다. 기본값은 1입니다.

구문

선택자 {
	filter: opacity(숫자);
}

예시

우리 이미지에 50% 투명도를 설정해 봅시다:

<div id="elem"></div>

#elem {
	filter: opacity(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예시

이제 100% 투명도를 설정해 봅시다:

<div id="elem"></div>

#elem {
	filter: opacity(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

예시

이제 opacity 함수에 0 값을 설정해 봅시다:

<div id="elem"></div>

#elem {
	filter: opacity(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

함께 보기

배경을 흐리게 하는 blur 함수
배경의 밝기를 설정하는 brightness 함수
배경의 대비를 설정하는 contrast 함수
배경에 그림자를 설정하는 drop-shadow 함수
배경의 색조를 설정하는 hue-rotate 함수
배경색을 반전시키는 invert 함수
배경을 세피아 톤으로 변환하는 sepia 함수
배경에 대한 단축 속성인 background 속성
블록에 배경 이미지를 설정하는 데 사용하는 background-image 속성