.app {
  @apply min-h-screen overflow-x-hidden;
}

.app::before {
  @apply fixed top-0 left-0 w-screen h-screen bg-fixed bg-center bg-cover bg-no-repeat;
  content: "";
  z-index: -1;
  opacity: 0.4;
  background-color: var(--background-color);
  background-image: url("./assets/images/background.jpg");
}

　cross-fade() 可以在规定的透明性共混两个图像。它可用于许多简单的图像处理，例如使用纯色为图像着色或通过将图像与径向渐变组合来突出显示页面的特定区域。

　cross-fade() 将图像以百分比限定不透明度与其它图像混合。百分比值不带引号，必须包含 '%' 符号，其值必须介于 0% 和 100% 之间。0% 意味着图像是完全透明的，而 100% 使图像完全不透明。语法如下：

<image-combination> = cross-fade(<image>, <image>, <percentage>)

　其中 指的是透明度，只会改变第 2 个图像的透明度，最终的效果是第 1 个图像完全不透明和第 2 个图像半透明叠加的效果。如下示例：

cross-fade(url(white.png), url(black.png), 0%);   /* 全黑 */
cross-fade(url(white.png), url(black.png), 100%); /* 全白 */

所以要实现半透明背景图效果，只需要第 1 张图使用透明图片，第 2 张图使用背景图就可以了，具体实现如下：

.app {
  @apply min-h-screen overflow-x-hidden bg-fixed bg-center bg-cover bg-no-repeat;
  --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
  background-color: var(--background-color);
  background-image: cross-fade(
    var(--transparent),
    url("./assets/images/background.jpg"),
    10%
  );
  background-image: -webkit-cross-fade(
    var(--transparent),
    url("./assets/images/background.jpg"),
    10%
  );
}

　Safari 新版本已经不需要私有前缀了，而谷歌要想支持该函数依旧需要添加前缀 -webkit-。

文章来自：蝉時雨（半透明背景图实现）