尾风中不透明的背景图像

本教程将介绍尾风中不透明的背景图像的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

尾风中不透明的背景图像 教程 第1张

问题描述

我正在尝试重新创建一个从普通的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
  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

好了关于尾风中不透明的背景图像的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。