Day 14：背景圖片相關樣式【Tailwind – Background-image 應用】 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 14

自我挑戰組

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 14 篇

Day 14：背景圖片相關樣式【Tailwind – Background-image 應用】

14th鐵人賽 background-image tailwindcss background-gradient 漸層

linlaose

團隊死線衝鋒 Deadline Squad

2022-09-29 21:28:58

1236 瀏覽

分享至

今天來帶大家操作 background-image 以及 background-gradient～

在使用 background-image 時，筆者常用以下幾種樣式做搭配：

background-size: cover;
background-position: center;
backgorund-repeat: no-repeat;
分別對應到 tailwind 為：
bg-cover
bg-center
bg-no-repeat

首先，background-image 並沒有保留在 tailwind 的預設樣式裡面，必須透過使用者在 config 檔案 (tailwind.config.js) 客製，前面幾篇有稍微帶過客製參數的方法了，基本上都一樣並不難

    extend: {
      backgroundImage: {
        'RS-660': "url('../../src/img/rs660.jpg')"
      },
    },

在客製參數時需指定路徑到我們想要放的圖片上，相對路徑要特別注意，以筆者的資料夾結構而言：

tailwind-cli/
  |
  |-dist/
  |  |-css/
  |    |-style.css

相對路徑起始點會以編譯後的 css 資料夾開始，所以如果只有輸入

./img/**/*.jpg

將會指向

/dist/css/img/**/*.jpg

在客製化時務必注意相對路徑的位置，最後範例程式碼如下：

<body class="bg-center bg-no-repeat bg-cover bg-RS-660"></body

再來是 background-gradient：

<div
    class="absolute w-screen h-full opacity-30 bg-gradient-to-r from-black to-white">
</div>

absolute w-screen h-full opacity-30，定位與尺寸還有透明度的樣式先不看，讓我們把重點放在 bg-gradient-to-r，以範例程式碼來說 bg-gradient-to-r 是由左至右漸層，搭配 from-black、to-white，可以做出由左至右從黑到白：

如果再加上透明度：