이미지를 배경으로 텍스트를 넣고 싶었다.
그래서 배경 이미지를 어둡게 하기 위해 부모 div의 배경을 검정색으로 하고 이미지가 들어갈 div의 opacity를 조절했다.
<div className="bg-black">
<div className="h-64 bg-[url('/region/incheon.webp')] bg-cover text-white opacity-50">
인천
</div>
</div>
그런데 위처럼 작성하니 글씨의 투명도도 함께 조절되었다. 이러면 안되는 것인데..!
그래서 배경 이미지가 들어갈 div를 검정색 배경의 div로 감싸는 것이 아니라 div 자체에 그래디언트와 이미지를 배경으로 넣어주었다.
tailwind로는 이미지와 그래디언트를 배경으로 동시에 할 수 없다고 해서 inline-style을 활용했다.
url 부분에는 public 폴더에 있는 이미지를 가져오기 위해 저렇게 작성했다.
<div
style={{
backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('/region/incheon.webp')`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
}}
className="h-64 text-white"
>
인천
</div>