本文介绍了尾风中不透明的背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试重新创建一个从普通的css到tawincss的项目。但我尝试了很多选择，都失败了。

这是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;
}

任何人可以将此代码转换为等效的TailWincss代码吗？

推荐答案

您有几个选项：

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

第二个选项是继续使用现在的样式表，但仅用于背景图像：

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




  

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

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。