[TIL] Background-image 투명화하기

내용물(글자 등)은 그대로 놔둔 채 배경 이미지만 투명화하는 방법을 찾아보았다. 그게 뭐가 어려워? 그냥 opacity 적용하면 되는 것 아닌가?

그러나 여러가지 시도해보았지만 이 망할 background-image에만 opacity를 따로 적용하는 CSS 문법은 존재하지 않는다.

물론 방법은 존재한다. 코딩에 있어서 불가능이란 없는 법. 배경이미지를 담당하는 Element를 따로 만들면 된다. 그 중에서도 가장 fency한 방법을 배워볼까 한다.

베이스가 되는 div 엘리먼트 CSS

/* 배경을 넣고자하는 div 엘리먼트 */
.im-div {
	position: relative;
	z-index: 1;
}

배경이미지를 위한 엘리먼트 CSS

본래 Element를 따로 작성하려면 HTML 부분을 건드려야겠지만, CSS만으로 이것을 해결할 수 있는 방법이 있다. 바로 가상 요소인 ::after 이다.
::after는 해당 요소의 맨 마지막 자식으로 의사 요소를 생성해준다. 일반적으로는 content 속성과 함께 사용해, 어떠한 요소에 장식용 컨텐츠를 추가할 때 사용하는 요소이다.

어떻게 사용하면 되는가는 바로 예제를 통해 배워보자.

.im-div::after {
	position: absolute;
    background-image: url('이미지 주소');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0.5; /* 우리가 실제 적용하기 위한 옵션! */
    z-index: -1;
}

opacity를 제외한 나머지 옵션은 필수옵션이다. 하나씩 제거해보면서 왜 필수 옵션인지 알아보는 것도 좋은 공부가 되겠다.

• 전체코드:

.im-div {
	position: relative;
	z-index: 1;
}
.im-div::after {
	position: absolute;
    background-image: url('이미지 주소');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0.5; /* 우리가 실제 적용하기 위한 옵션! */
    z-index: -1;
}

필수옵션들만 정리해보았고, 나머지는 알아서 커스텀하면 된다!