在tailwindcss中具有不透明度的背景图像

Posted 2023-03-06

【中文标题】在tailwindcss中具有不透明度的背景图像

【英文标题】：Background Image with opacity in tailwindcss

【发布时间】：2021-02-16 03:53:05

【问题描述】：

我正在尝试重新创建一个从 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 代码吗？

【参考方案1】：

你有几个选择：

最简单的方法是在 style 属性上设置图片，毕竟这是非常自定义的样式：

<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>

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

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

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

【讨论】：

非常感谢。那行得通。但是为什么 tailwind 的渐变 CSS 属性没有像这样工作呢？此外，文档中没有这样的内容。

对，我已经为你写了一个教程来回答这些问题：bleext.com/post/creating-a-hero-header-with-a-fixed-image

我建议对颜色和背景 url 使用 css 变量。在 tailwind 配置中使用这些 css 变量，您可以从共享主题配置（静态或顺风方式）中受益。