tailwindcss任意值的背景图片无法加载？

Question

描述 - 图像无法作为背景加载。

截图-

Answer 1

您可以做的一件事就是使用

tailwind.config.js

。

只需在

tailwind.config.js

文件中定义图像路径即可。

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'galaxy': "url('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg')",
        'tree': "url('http://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/img/tree_3.png')",
      }
    },
  },
  plugins: [],
}

然后使用

bg-keyvalue

。就像这里的

bg-galaxy

一样，在这样的页面中使用它们。

并使用类似

<script src="https://cdn.tailwindcss.com"></script>
<div class="mx-auto mt-16 grid w-8/12 grid-cols-3 text-white grid-rows-3 gap-4 bg-slate-200">
  <div class="row-span-2 flex items-center justify-center rounded-lg bg-tree">block1</div>
  <div class="col-span-2 flex items-center justify-center rounded-lg bg-galaxy">block2</div>
  <div class="row-span-2 flex items-center justify-center rounded-lg bg-blue-400">block4</div>
  <div class="flex items-center justify-center rounded-lg bg-blue-400">block5</div>
  <div class="flex items-center justify-center rounded-lg bg-blue-400">block3</div>
  <div class="flex h-40 items-center justify-center rounded-lg bg-blue-400">block6</div>
</div>

您可以看到我的顺风播放链接作为示例这里

Answer 2

你可以这样做：

<div
    class="bg-[image:var(--bg-image)]"
    style="
        --bg-image: url('http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg');
    "
>...</div>