[CSS] 배경(backgroundimage)에 검은색 틴트 주기

웹 사이트를 만들다 보면 화면의 전체가 이미지를 덮고 있고

그 안에 텍스트를 넣고 싶을 때가 많이 있다 하지만

그렇게 하면 배경의 이미지가 너무 쨍해? 텍스트가 잘 안 보일 경우가 있기 때문에

 

배경 이미지에 검은색 블라인드 처리를 하여

텍스트가 강조되게 할 수 있는 방법을 알아보자

 

블라인드(틴트)를 주기 전

텍스트가 배경 이미지의 밝음 때문에 잘 보이지 않는다.

 

코드

 

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../background1.jpg);

css에 linear-gradient를 줘보자!

 

블라인드(틴트) 후

이렇게 텍스트는 잘 보이고 뒤에 배경 이미지는 어두워 진 것을 확인 할 수 있다

 

끝

 

출처 - 코딩애플