如何用CSS实现Flutter同款堆叠式背景（渐变圆+模糊图）

直接用Flutter原生的Stack组件就能还原你要的效果，核心是分层构建模糊背景图+两侧渐变圆，以下是可直接复用的代码示例：

• 底层模糊背景图：用ImageFiltered实现高斯模糊，配合BoxFit.cover让图片铺满整个视口
• 两侧渐变圆：用带渐变的圆形Container，通过Positioned定位到屏幕外侧，只露出部分区域模拟半圆效果

import 'dart:ui';
import 'package:flutter/material.dart';

class WebBackground extends StatelessWidget {
  const WebBackground({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 1. 底层模糊背景图
          ImageFiltered(
            imageFilter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
            child: Image.asset(
              'assets/your-background-image.jpg', // 替换成你的背景图路径
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
          ),
          // 2. 左侧渐变圆
          Positioned(
            left: -200, // 向左偏移，只露出右侧部分
            top: MediaQuery.of(context).size.height * 0.2,
            child: Container(
              width: 600,
              height: 600,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(
                  colors: [Colors.purple.withOpacity(0.4), Colors.blue.withOpacity(0.1)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
            ),
          ),
          // 3. 右侧渐变圆
          Positioned(
            right: -180, // 向右偏移，只露出左侧部分
            bottom: MediaQuery.of(context).size.height * 0.1,
            child: Container(
              width: 550,
              height: 550,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(
                  colors: [Colors.orange.withOpacity(0.3), Colors.pink.withOpacity(0.1)],
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                ),
              ),
            ),
          ),
          // 此处叠加你的页面内容
          const Center(
            child: Text('你的页面内容', style: TextStyle(fontSize: 24, color: Colors.white)),
          ),
        ],
      ),
    );
  }
}

适配调整要点： #

• 模糊参数sigmaX/sigmaY可根据原应用效果微调，数值越大模糊程度越高
• 渐变圆的尺寸、位置、颜色渐变，可通过调整Positioned偏移量、Container宽高、LinearGradient颜色组来匹配原设计
• 若使用网络图片，替换Image.asset为Image.network，建议搭配CachedNetworkImage优化Web加载性能
• 确保背景图资源在Web项目中正确配置（本地图需在pubspec.yaml声明assets，网络图需保证可正常访问）

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