🎨 Custom Background Example

✨ Background Slot Feature

AppLayout now supports background slot, allowing you to create fully customized page backgrounds!

Gradient backgrounds
Background images
Decorative elements
Canvas animations
Video backgrounds

💡 Code Example

<AppLayout
  metaConfig={{ title: '我的应用' }}
  showHeader={false}
  showFooter={false}
  showSidebar={false}>
  
  <!-- 自定义背景层 -->
  <div slot="background" 
       style="position: fixed; 
              inset: 0; 
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    
    <!-- 装饰元素 -->
    <div style="position: absolute; 
                top: 10%; 
                left: 10%; 
                width: 24rem; 
                height: 24rem; 
                background: rgba(255, 255, 255, 0.1); 
                border-radius: 9999px; 
                filter: blur(60px);">
    </div>
  </div>

  <!-- 您的页面内容 -->
  <h1>欢迎</h1>
</AppLayout>

🎯 Key Features

Fixed Positioning - Background fixed to viewport, does not scroll with content
Lowest Z-index - Background layer below all content (z-index: 0)
Pointer Events Passthrough - Default pointer-events: none, does not affect interactions
Fully Customizable - You can use any HTML/CSS/Canvas

🎨 Use Cases

Marketing Landing Pages - Eye-catching gradient backgrounds
Brand Websites - Showcase brand colors and style
Portfolios - Creative backgrounds to show personality
Event Pages - Holiday-themed backgrounds
Product Showcases - Visual effects matching product tone

⚡ Performance Tips

Use CSS gradients over images (faster, smaller)
If using background images, consider compression and lazy loading
Use backdrop-filter for blur instead of multiple layers
Use requestAnimationFrame for Canvas animations
Avoid excessive shadows and blurs (affects performance)

💡 More Examples

You can also implement:

Background image + overlay
Particle animation background
Video background
Geometric patterns
Animated gradients