css - 在tailwindcss中具有不透明度的背景图像
问题描述
我正在尝试从 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 代码吗?
解决方案
你有几个选择:
最简单的一种是在 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
推荐阅读
- java - 查找与用户输入匹配的数组中的第一个元素并在 2 个二维数组之间打印该位置
- javascript - 如何使用模态对话框库将用户输入存储为变量?(JavaScript)
- c++ - (char*)&obj 替代品
- javascript - 如何修复:discord.js 中的“TypeError:无法读取未定义的属性‘标签’”错误
- css - FullPage.JS 分屏。在移动设备上使其成为一页样式
- javascript - 在android上运行应用程序时出现问题
- css - webpack 4:创建多个主题 css 文件
- oracle - Oracle 从一个查询中选择另一个查询中不存在的行
- image - 可以从我的数据库中获取一些图像的路径,但询问超过 9 个给我一个内部服务器错误
- node.js - mongodb中的递减值