CSS background 复合属性生成器
可视化生成 CSS background 复合属性：支持最多 4 层背景叠加，每层可选线性渐变、径向渐变或图片 URL，
独立配置 repeat、position、size、attachment。
内置 background-clip: text 文字裁剪特效与 9 宫格位置选择器。实时预览，一键复制 CSS 简写代码。
内置线性渐变、径向光晕、图片平铺、视差固定、多层叠加、文字裁剪、渐变叠图片、暖色渐变 8 组预设。所有处理在浏览器本地完成。
background: linear-gradient(135deg, #667eea, #764ba2) no-repeat center center / cover scroll;
常见问题
CSS background 包含哪些子属性？
background 是 CSS 中最复杂的复合属性之一，包含 8 个子属性：
① background-color：纯色背景，只能有一个值
② background-image：背景图片或渐变，可多层逗号分隔
③ background-repeat：平铺方式（repeat / no-repeat / repeat-x / repeat-y）
④ background-position：位置（left / center / right / 百分比 / 像素）
⑤ background-size：尺寸（auto / cover / contain / 自定义）
⑥ background-attachment：附着方式（scroll / fixed / local）
⑦ background-origin：定位参考区（border-box / padding-box / content-box）
⑧ background-clip：绘制区域（border-box / padding-box / content-box / text）
除 background-color 外，其余 7 个子属性都支持多层（逗号分隔）。
background 简写的语法是什么？position / size 的斜杠怎么用？
简写语法将所有子属性写在一行，多层用逗号分隔：
background: [image] [position] / [size] [repeat] [attachment] [origin] [clip] [color], ...;
关键规则：
① position 与 size 用斜杠分隔：center / cover 表示位置 center、尺寸 cover。
斜杠前是 position，斜杠后是 size。不写斜杠时 size 默认 auto。
② color 只能有一个，且必须在最后一层之后：background: url(a.jpg), #fff;
③ 层叠顺序：先写的层在上方，后写的层在下方。
示例：background: linear-gradient(135deg, #667eea, #764ba2) no-repeat center / cover, url(bg.jpg) no-repeat center / cover, #1a1a2e;
本工具自动生成符合规范的简写代码，非默认值省略保持精简。
多层背景的叠加顺序是怎样的？
多层背景中，先列出的层在最上方，后列出的层在最下方，background-color 在所有图层之下。
这与 z-index 的直觉相反——CSS 中第一个图层覆盖后面的图层。
典型应用——渐变遮罩叠在图片上：
background: linear-gradient(rgba(0,0,0,0.5), transparent) no-repeat center / cover, url(photo.jpg) no-repeat center / cover;
渐变层在前（上方）作为半透明遮罩，图片层在后（下方）作为底图。background-color 在最底层填充剩余透明区域。
本工具支持最多 4 层叠加，可上移/下移调整层叠顺序。
background-clip: text 文字裁剪怎么实现？
background-clip: text 让背景只绘制在文字轮廓内，配合 color: transparent 使文字透明、
背景渐变填充文字形状，实现渐变文字效果：
① background: linear-gradient(90deg, #ff6b6b, #4ecdc4); —— 设定渐变背景
② -webkit-background-clip: text; —— WebKit/Blink 浏览器前缀（Chrome / Safari / Edge 必须）
③ background-clip: text; —— 标准属性（Firefox 49+）
④ color: transparent; —— 文字颜色透明，露出背景渐变
注意：必须同时写 -webkit- 前缀版本，否则 Chrome / Safari 不生效。本工具的"文字裁剪"预设自动生成完整代码。
兼容性：Chrome 3+、Safari 4+、Firefox 49+（需 -webkit- 前缀或 background-clip: text）。
background-size: cover 和 contain 有什么区别？
两者都让图片缩放以适应容器，但策略不同：
cover（覆盖）：图片等比缩放完全填满容器，可能裁切超出部分。
适合 Hero 背景、全屏封面——保证无空白但可能看不到图片完整内容。
contain（包含）：图片等比缩放完整显示在容器内，可能留白。
适合 logo 展示、产品图——保证图片完整但容器可能有空白区域。
auto（原始）：图片按原始尺寸显示，不缩放。
数学差异：cover 取 max(容器宽/图宽, 容器高/图高) 作为缩放比；contain 取 min。
本工具每层可独立选择 cover / contain / auto。
background-attachment: fixed 视差效果有什么注意点？
background-attachment: fixed 让背景相对于视口固定，不随页面滚动，
产生视差效果——内容滚动时背景"不动"。
注意点：
① 性能开销：fixed 背景在滚动时需要反复重绘，移动端尤其卡顿。
iOS Safari 默认忽略 fixed 改用 scroll 以保性能。
② 定位参考：fixed 模式下 background-position 相对于视口而非元素自身，
图片尺寸需足够大（推荐 cover）。
③ 替代方案：移动端视差推荐 position: sticky + transform 或
JavaScript scroll 监听，性能更好。
④ local 模式：当元素自身可滚动（overflow: auto）时，attachment: local
让背景随元素内容滚动，适合滚动容器内的背景。
background-origin 和 background-clip 有什么区别？
两者都接受 border-box / padding-box / content-box 三个值，但作用不同：
background-origin（定位参考区）：决定 background-position 的坐标系起点。
padding-box（默认）时 position: left top 对齐 padding 区左上角；border-box 时对齐边框左上角；
content-box 时对齐内容区左上角。
background-clip（绘制区域）：决定背景绘制到哪个区域。
border-box（默认）时背景绘制到边框外缘；padding-box 时只绘制到 padding 区（不覆盖边框）；
content-box 时只绘制到内容区。
区别总结：origin 管"从哪开始定位"，clip 管"画到哪截止"。两者经常配合使用实现精细控制。
clip 还支持 text 值实现文字裁剪，但 origin 不支持 text。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有背景配置、渐变编辑、图片 URL 引用与 CSS 生成由 JavaScript 在你本地执行，不会发送到任何服务器。预览通过浏览器原生 CSS 渲染实时呈现， 全程零网络请求，可离线使用。图片 URL 仅在浏览器中作为 CSS background-image 引用加载， 不会被上传或存储。