[오삽완] div에 background image 넣기 (React)

🔍 삽질

이미지를 배경으로 텍스트를 넣고 싶었다.

그래서 배경 이미지를 어둡게 하기 위해 부모 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>