CSS 背景属性完全指南（03）：最佳实践、参考资源

/* ✅ 使用现代图片格式 */
.element {
  background-image: url('image.webp'); /* WebP 比 JPEG 小 30% */
}

/* ✅ 设置后备颜色 */
.element {
  background: #fff url('bg.jpg') center/cover;
}

/* ✅ 响应式背景图 */
.hero {
  background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-tablet.jpg');
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

/* ✅ 懒加载非首屏背景 */
.lazy-bg {
  background-image: none;
}

.lazy-bg.loaded {
  background-image: url('lazy.jpg');
}

/* ✅ 避免大面积 backdrop-filter */
.specific {
  backdrop-filter: blur(10px);
}

/* ❌ 避免 */
.full-page {
  backdrop-filter: blur(10px); /* 性能开销大 */
}

/* ✅ 确保文字与背景对比度足够 */
.text-on-bg {
  background: url('bg.jpg');
  color: #fff;
  /* 添加遮罩确保对比度 */
}

/* ✅ 使用伪元素遮罩 */
.readable-text {
  position: relative;
}

.readable-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 0;
}

.readable-text > * {
  position: relative;
  z-index: 1;
}

/* ✅ 提供降级方案 */
@supports (background: linear-gradient(45deg, red, blue)) {
  .gradient {
    background: linear-gradient(45deg, #667eea, #764ba2);
  }
}

@supports not (background: linear-gradient(45deg, red, blue)) {
  .gradient {
    background-color: #667eea; /* 降级 */
  }
}

/* ✅ 响应式背景图 */
.hero {
  background: url('hero-mobile.jpg') center/cover;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero.jpg');
  }
}

/* ✅ 使用 aspect-ratio */
.card {
  aspect-ratio: 16/9;
  background: url('card.jpg') center/cover;
}

/* ✅ 使用 CSS 变量 */
:root {
  --bg-primary: #fff;
  --bg-secondary: #f5f5f5;
}

.section {
  background: var(--bg-primary);
}

/* ✅ 移动端禁用视差 */
@media (max-width: 767px) {
  .parallax {
    background-attachment: scroll; /* 移动端禁用 fixed */
  }
}

/* ✅ 使用简写 */
.good {
  background: url('bg.jpg') center/cover no-repeat;
}

/* ❌ 避免冗长 */
.bad {
  background-image: url('bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ✅ 需要单独覆盖时 */
.override {
  background: url('bg.jpg') center/cover no-repeat;
}

.override:hover {
  background-color: rgba(0,0,0,0.1);
}

/* ✅ 使用 CSS 变量管理背景 */
:root {
  --hero-bg: url('hero.jpg');
  --pattern-bg: url('pattern.png');
}

.hero {
  background-image: var(--hero-bg);
}

/* 只设置颜色 */
.element {
  background-color: red;
}

/* 简写会重置其他属性 */
.element {
  background: red; /* 会重置 background-image 等为默认值 */
}

/* cover: 适合全屏背景 */
.hero {
  background-size: cover;
}

/* contain: 适合 Logo 展示 */
.logo {
  background-size: contain;
}

.parallax {
  background-attachment: fixed;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
}

.gradient-text {
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.multi {
  background: 
    url('top.png'),      /* 最上层 */
    url('middle.png'),   /* 中层 */
    #fff;                /* 最底层背景色 */
}

.element {
  position: relative;
}

.element::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('bg.jpg');
  opacity: 0.5;
  z-index: -1;
}

.element {
  background: 
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url('bg.jpg');
}

.element {
  background-origin: content-box; /* 从内容区开始定位 */
  background-clip: content-box; /* 裁剪到内容区 */
}

@media (min-width: 768px) {
  .parallax {
    background-attachment: fixed;
  }
}

@media (max-width: 767px) {
  .parallax {
    background-attachment: scroll;
  }
}

@supports (backdrop-filter: blur(10px)) {
  .glass {
    backdrop-filter: blur(10px);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass {
    background: rgba(255, 255, 255, 0.9); /* 降级 */
  }
}

/* ✅ 简单渐变 */
.simple {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

/* ✅ 使用 will-change 优化动画 */
.animated {
  background: linear-gradient(45deg, #667eea, #764ba2);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  will-change: background-position;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ✅ 考虑使用图片替代复杂重复渐变 */