[tailwind 4] Tailwind CSS에서 배경 이미지와 그라디언트 효과 동시 적용하기

 

색상만 그라디언트 효과를 주는 방법은 공식문서에 있는 것처럼 시도하면 됬었지만..

https://tailwindcss.com/docs/background-image

background-image - Backgrounds

 

 <header 
    class="bg-linear-to-t from-[oklch(0.2_0.05_250/0.9)] to-[oklch(0.2_0.05_250/0.4)_90%]"
    >

 

 

이미지를 바닥에 깔고 그 위에 그라디언트를 주는 게 생각보다 시간이 걸렸다

 

<!-- 잘못된 방법 1 ❌-->
<header 
 class="relative bg-[url('/images/showcase.jpg')] bg-cover bg-center 
        after:absolute after:inset-0 after:bg-linear-t/oklch 
        after:from-[oklch(0.2_0.3_280/0.95)] after:to-[oklch(0.6_0.2_280/0.3)]" 
>

<!-- 잘못된 방법 2 ❌-->
<header 
 class="bg-[url('/images/showcase.jpg')] bg-cover bg-center 
        bg-linear-t/oklch from-[oklch(0.2_0.3_280/0.95)] to-[oklch(0.6_0.2_280/0.3)]" 
>

 

 

1. CSS background 속성의 기본 동작을 활용하여
2. 그라디언트를 먼저 선언하고, 그 다음에 이미지 URL을 작성합니다
3. 쉼표(,)로 구분하여 여러 배경을 나열합니다
4. 먼저 선언된 그라디언트가 위에 표시됩니다

   <header 
   	class="bg-[linear-gradient(to_top,oklch(0.2_0.05_250/0.9),oklch(0.2_0.05_250/0.4)_90%),url('/images/showcase.jpg')] bg-cover bg-center"
    >