如何在vanilla-extract/css中设置背景图及结合线性渐变

1. 背景图编译失败的修复 #

你的问题出在资源路径的处理方式上。在Gatsby + vanilla-extract的环境中，不能直接用相对字符串路径引用图片，需要通过ES模块的import语法引入图片资源，让Gatsby的资源处理管道正确解析它。

修改步骤：

1. 在styles.css.ts中导入背景图文件：

import backgroundImage from "./background-main.png";

2. 然后在globalStyle中使用这个导入的变量作为backgroundImage的路径：

import { globalStyle } from "@vanilla-extract/css"
import backgroundImage from "./background-main.png";

globalStyle("body", {
  margin: 0,
  padding: 0,
  backgroundImage: `url(${backgroundImage})`,
  WebkitFontSmoothing: "antialiased",
  MozOsxFontSmoothing: "grayscale",
})

// 其他全局样式...

这样Gatsby会正确处理图片资源的打包路径，避免编译错误。

2. 线性渐变与背景图结合的实现 #

在vanilla-extract中，你可以直接像常规CSS一样实现渐变叠加背景图的效果，有两种常见写法：

方式1：使用background复合属性 #

直接将完整的背景声明作为字符串传入，和原生CSS写法一致：

globalStyle("body", {
  margin: 0,
  padding: 0,
  background: `linear-gradient(0deg, rgba(250, 221, 187, 0.95), rgba(250, 221, 187, 0.95)), url(${backgroundImage})`,
  backgroundSize: "cover",
  backgroundPosition: "center",
  WebkitFontSmoothing: "antialiased",
  MozOsxFontSmoothing: "grayscale",
})

方式2：拆分到backgroundImage属性 #

vanilla-extract支持数组形式的CSS属性值，你可以将渐变和背景图作为独立图层传入：

globalStyle("body", {
  margin: 0,
  padding: 0,
  backgroundImage: [
    `linear-gradient(0deg, rgba(250, 221, 187, 0.95), rgba(250, 221, 187, 0.95))`,
    `url(${backgroundImage})`
  ],
  backgroundSize: "cover",
  backgroundPosition: "center",
  WebkitFontSmoothing: "antialiased",
  MozOsxFontSmoothing: "grayscale",
})

两种写法效果完全一致，可根据代码可读性需求选择。

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