CSS如何实现背景平铺与拉伸控制_使用background-repeat属性

background-repeat 的合法值有 repeat、no-repeat、repeat-x、repeat-y、space、round 六个其中 space 和 round 为 CSS3 新增IE9 支持。background-repeat 的合法值有哪些它只接受几个固定关键字不是任意字符串都能用。写错值会退化成默认的 repeat但浏览器控制台通常不报错容易误以为生效了。repeat横向纵向都平铺默认行为no-repeat完全不平铺只显示一张图repeat-x只横向平铺repeat-y只纵向平铺space平铺但留等距间隙边缘对齐容器round缩放图片以填满容器可能拉伸或压缩space 和 round 是 CSS3 新增的IE 仅从 9 开始支持老项目要留意兼容性。想让背景图铺满整个容器又不变形该选哪个值单靠 background-repeat 做不到“铺满且不变形”——它只管重复逻辑不管缩放。真正起作用的是 background-size。要铺满且裁剪多余部分background-size: cover要铺满且保留完整图像background-size: contain要强制拉伸填充background-size: 100% 100%会变形常见错误是以为设了 no-repeat 再加宽高就能撑满结果图太小留白严重。这时候得配合 background-size而不是调 background-repeat。立即学习“前端免费学习笔记深入”background-repeat: space 在实际中为什么常失效它对图像尺寸和容器尺寸有隐含要求只有当单张图宽高都小于容器时才会真正产生间隙否则会退回到类似 repeat 的行为。 There’s An AI For That 全球领先的 AI 聚合器收集10,225个AI工具可用于超过2,548个任务。