在CSS中，background-repeat 属性控制背景图像的重复方式。它是一个基础但很实用的属性。简单说，它决定背景图在容器内是铺满、只显示一次，还是在水平和垂直方向上反复出现。

直接看取值，一目了然。

background-repeat 的常用选项

background-repeat 支持以下几个主要取值：

• repeat：默认值。背景图像在水平和垂直方向上都重复，铺满整个容器。
• no-repeat：背景图像不重复，只显示一次。默认位于元素的左上角。
• repeat-x：只在水平方向上重复，垂直方向不重复。
• repeat-y：只在垂直方向上重复，水平方向不重复。
• space：图像在指定方向上尽可能重复，但不会被裁剪。多余的空白空间会均匀分布在图像之间。
• round：图像会缩放或压缩，以适应容器。确保完整填满区域，不会留空或被裁剪。

简写与双值语法

从CSS3开始，支持使用两个值分别设置水平和垂直方向的重复方式，灵活性更高：

• background-repeat: repeat no-repeat; — 水平重复，垂直不重复。
• background-repeat: space round; — 水平方向用 space，垂直方向用 round。

实际应用场景

选对重复方式，能解决不少设计上的细节问题：

• 使用 no-repeat 配合 background-position，可以实现单张背景图居中或定位显示。
• 使用 repeat-x，轻松制作横向条纹或页脚装饰线。
• 使用 round，能让图标无缝铺满整个区域，避免出现半截图像这种尴尬情况。

掌握这些选项，就能更灵活地控制页面视觉效果，让背景图按照预期呈现。

《夸克》非常好用的免费AI浏览器

下载APP查看