div 배경이미지 위에 반투명 레이어 위에 글자 입력하는 간편한 방법

div 에 background 로 배경이미지를 넣고 그 위에 레이어 느낌으로 반투명한 색으로 덮은 후에 글씨를 표현하고 싶을 때 사용하는 방법입니다.

여러가지 방법이 있겠지만, div:before 혹은 div:after 를 사용하는 방법은 div 안에 있는 글씨 위에 반투명 레이어가 덮여 글씨까지 같이 흐리게 보이게 되는 단점이 있죠. 그 단점을 피하려고 z-index까지 쓰고 나면…^^;; 점점 복잡해집니다.

제가 소개하는 방법은 일종의 잔머리(개발은 꼼수죠! ^^?)를 쓴 방법으로 linear-gradient를 사용하는 방법입니다.

예를 들면, 이런 식이죠.

div {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('Image URL');
    background-size: cover;
}

위 코드를 입력하면, 배경이미지 위에 50% 투명도의 하얀 레이어가 덮여진 효과를 표현할 수 있습니다. 이렇게 표현하면, z-index 를 사용하지 않고 텍스트를 입력하더라도 반투명한 색상에 영향을 받지 않기 때문에 좀 더 간결한 코드로 표현할 수 있습니다.

이런 문제로 고생 중이신 분들께 이 글이 도움이 되길 바랍니다^^

참조

• https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image/36679903