如何用Tailwind CSS或原生CSS实现带局部渐变光效的纯色背景？

当然可以，无论是原生CSS还是Tailwind CSS，都能实现绝大多数常见的背景效果（包括渐变、纹理、网格、噪点、动态过渡等），以下是几种典型场景的实现示例：

原生CSS实现 #

渐变背景 #

.target-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

带噪点纹理的渐变背景 #

.target-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

网格线背景 #

.target-bg {
  background-color: #f0f0f0;
  background-image: linear-gradient(#ccc 1px, transparent 1px),
                    linear-gradient(90deg, #ccc 1px, transparent 1px);
  background-size: 20px 20px;
}

Tailwind CSS实现 #

渐变背景（直接用内置工具类） #

<div class="bg-gradient-to-br from-indigo-500 to-purple-600"></div>

带噪点纹理的渐变背景（自定义配置） #

先在tailwind.config.js中扩展背景图：

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'noise-gradient': "linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E')",
      },
    },
  },
}

然后使用自定义类：

<div class="bg-noise-gradient bg-blend-overlay"></div>

网格线背景（工具类+内联样式） #

<div class="bg-gray-100 [background-image:linear-gradient(#ccc_1px,transparent_1px),linear-gradient(90deg,#ccc_1px,transparent_1px)] [background-size:20px_20px]"></div>

如果是更复杂的动态背景（如滚动视差、hover动画），两种方案都可以通过CSS动画、@keyframes或Tailwind的动画工具类实现。

内容的提问来源于stack exchange，提问作者Paul Jolou