點燈坊

失くすものさえない今が強くなるチャンスよ

自行指定 Background Image

Sam Xiao's Avatar 2021-02-27

Tailwind CSS 預設 bg- 只能以漸層設定背景圖片，若要自行設定圖片，則要自行建立新 Utility。

Version

Tailwind CSS 2.0.3

bg-img

img000

自行指定 background image。

<template>
  <div class="h-screen bg-img bg-no-repeat bg-cover"/>
</template>

設定背景圖片的 style：

  • h-screen：設定背景圖片的 height
  • bg-img：設定背景圖片，bg-img 為自訂 utility，稍後會設定
  • bg-no-repeat：設定背景圖片不要重複，也就是只顯示單張圖片
  • bg-cover：設定自動根據 <div> 長寬延展

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: theme => ({
        'img': "url('https://picsum.photos/2560/1600/?random=10')",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

第 4 行

theme: {
  extend: {
    backgroundImage: theme => ({
      'img': "url('https://picsum.photos/2560/1600/?random=10')",
    })
  },
},

在 theme 之下設定 img 並指定 url()，則將來可用 bg-img 設定背景圖片。

Conclusion

  • 只要先在 tailwind.config.js 先設定好背景圖片，則可直接在 HTML 使用

Reference

Tailwind CSS, Background Image

# TailwindCSS