cover 保证铺满但可能裁切，contain 保证完整但可能留白。固定值 100% 100% 会拉伸变形——三者按场景挑。CSS3 支持多重背景：background: url(a) no-repeat, url(b) repeat-x;，靠前的在上层，每层都可独立设 size/position（逗号分隔）。
常见组合：纹理纸面叠渐变（base64 纹理 + linear-gradient）、卡片磨砂质感。渐变也是背景层，所以「渐变 + 图案 + 图片」三层混叠是日常操作。
<style> .box { height: 100px; border-radius: 10px; margin-bottom: 8px; background: linear-gradient(135deg, #4a9eff55, #a371f755), url(https://picsum.photos/id/1015/400/200) center/cover; /* 渐变叠在图上：颜色滤镜效果 */ } .icons { height: 60px; border-radius: 10px; background: rgba(74,158,255,.15), radial-gradient(circle at 20% 50%, #f0c33c 0 10px, transparent 10px), radial-gradient(circle at 60% 50%, #f778ba 0 10px, transparent 10px), #161b22; } </style> <div class="box"></div><div class="icons"></div>