英文:
Add a background image to a tailwinds css section
问题
我正在尝试在Tailwind CSS模板部分中添加背景图片。
Tailwind文档说要扩展主题，并定义一个图片，我已经在我的tailwind.config.js中这样做了：
extend: {
backgroundImage: {
'ttuPattern': 'url("/images/ttu.png")'
},
我想将该图片用作部分的背景。
<section
id="ttu"
aria-label="Features for investing all your money"
className="bg-gray-900 py-20 sm:py-32 ALSO TRIED IT HERE bg-cover"
style="background-image: url('ttuPattern'); height: 100%;"
>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl bg-cover" style="background-image: url('ttuPattern'); height: 100%;">
我的部分中没有显示图片。
如何在Tailwind CSS中使用背景图片？
英文:
I am trying to figure out how to add a background image to a Tailwinds CSS template section.
The tailwind docs say to extend the theme, with a defined image, which I have done in my tailwind.config.js as follows:
extend: {
backgroundImage: {
'ttuPattern': "url('/images/ttu.png')"
},
I want to use that image as the background of a section.
<section
id="ttu"
aria-label="Features for investing all your money"
className="bg-gray-900 py-20 sm:py-32 ALSO TRIED IT HERE bg-cover" style="background-image: ttuPattern height: 100%"
>
<Container>
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl bg-cover" style="background-image: ttuPattern height: 100%">
The image doesn't display in my section at all.
How can I use a bg image in tailwind css?
答案1
得分: 1
在class属性中最好使用bg-ttuPattern，因为它只需要更少的代码。在新版本3中，如果你只打算使用图片一次，可以使用任意值：
<div class="bg-[url('../public/images/tailwind.png')]"></div>
并且我已经修复了tailwind.config.js中的一些语法问题。
代码：
结构：
<section class="bg-gray-900 bg-ttuPattern bg-cover py-20 sm:py-32">
<!-- 这里放入你的内容! -->
</section>
配置：
module.exports = {
theme: {
extend: {
backgroundImage: {
ttuPattern: "url('https://via.placeholder.com/600x200.png')",
},
},
},
plugins: [],
}
请参见playground。
英文:
It's better to use bg-ttuPattern in class attribute because it just takes less. In the new version 3, you can use arbitrary values if you're going to use the image once:
<div class="bg-[url('../public/images/tailwind.png')]"></div>
And I've fixed some syntax issues in tailwind.config.js.
Code:
Structure:
<section class="bg-gray-900 bg-ttuPattern bg-cover py-20 sm:py-32">
<!-- Your content goes here! -->
</section>
Config:
module.exports = {
theme: {
extend: {
backgroundImage: {
ttuPattern: "url('https://via.placeholder.com/600x200.png')",
},
},
},
plugins: [],
}
See playground.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论