tailwindcss中不透明度的背景图像

Question

我正在尝试重新创建一个从vanilla CSS到tailwindcss的项目。但我尝试了很多选择，但都失败了。

这是CSS代码：

header {
background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
position: relative;
}

有人能把这个代码转换成等价的tailwindcss代码吗？

Answer 1

您有几个选项：

最简单的方法是在样式属性上设置图像，毕竟这些都是非常定制的样式：

<header
class="relative bg-fixed bg-center bg-cover bg-no-repeat"
style="background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)">

</header>

第二种选择是继续使用样式表，但仅用于背景图像：

header {
background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)
}

<header class="relative bg-fixed bg-center bg-cover bg-no-repeat">

</header>

最后，您可以创建一个插件，在其中您可以动态发送颜色，并将图像作为参数，顺风将为您生成这些类。这比较复杂，但文档确实很有帮助：https://tailwindcss.com/docs/plugins#app

如果你问我，我会选择第一个😃

以下是一个工作演示和教程：https://bleext.com/post/creating-a-hero-header-with-a-fixed-image

Answer 2

我在找到了一个将常规CSS转换为Tailwindcss CSS实用程序类的好工具https://transform.tools/css-to-tailwind

`/*
Based on TailwindCSS recommendations,
consider using classes instead of the `@apply` directive
@see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/
header {
@apply bg-no-repeat bg-cover bg-[center_center] bg-fixed relative;
background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)),
url(img/hero-bg.jpg);
}