我正在尝试使 tailwinds backgroundImage 解决方案发挥作用,并且我在此处或 GitHub 上找到了许多其他 tailwindcss 问题的帮助,但不适用于此。这不是一个复杂的任务,但仍然不起作用。
就像文档中一样,我想创建 2 个简单的背景图像以用于多个视图大小。文档https://tailwindcss.com/docs/background-image中指出“默认情况下,仅为背景图像实用程序生成响应式变体。” 这意味着,无需对变体进行任何进一步配置,我应该能够将其用于此目的。
这是我的 tailwind.conf.js 的样子(重要部分在最后):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
只是为了确保我包含了完整的内容。这就是 html 的样子:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
正如我所说,没有什么特别的,“npm run dev”完成时没有任何错误......但是如果我检查该元素,我看不到与 CSS 中任何背景参数相关的任何内容。即使文档中的示例也不起作用,它应该必须提供渐变块。
我正在使用 Tailwind 和 Laravel。
我该如何继续? (我可以在 sass 文件中使用 CSS 代码来解决问题,但我想使用 Tailwind 自己的解决方案)。
我在 TailwindCSS 2.2.7 中遇到了这个问题,我的问题是我的语法错误。
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
'
和 "
至关重要。由于某种原因,eslint 会在保存时“清理”这些角色,这使得它无法工作。此外,../
领先于 url
也很关键。
如果您不想在
tailwindcss.config.js
中扩展您的主题,并且想将背景图片直接添加到您的div
中,您可以尝试:
<div class="bg-[url('../public/assets/images/banner.svg')]">
这是让背景图像正常工作的最简单方法。
参考:检查任意值标题下
tailwindcss的背景图片功能已在1.7.0版本发布。
我在我的开发环境中测试了你的代码,但它也不起作用,因为我也有早期版本的 tailwindcss。升级到最新版本后,您的代码运行良好。
编辑 tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
添加图像的名称和 URL 并使用它。 例子
bg-hero-pattern
您需要将(主题)道具添加到您的配置中 像这样:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
或像这样带有“../”的网址
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
希望它有效:)
在 ^3.1.8 版本中图像路径不起作用。然后我只是输入“../”而不是“./” 它起作用了。示例:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
我必须指定要显示的图像的高度
<div className="h-screen bg-hero"/>
对于静态图像[设置是背景图像]适合我。
import m5 from '../Assets/a2.avif'
<div style={{ backgroundImage: `url(${m5})` }}>
检查您调用@tailwind实用程序的位置(例如index.css),然后根据该根文件修复tailwind.config的URL
module.exports = {内容: ["./src/**/*.{html,js}"],主题: {extend{},backgroundImage: {"hero-lg": "url('/src/资产/图像/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="英雄内容 bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"