如何使用CSS设置元素背景平铺_background-repeat background-size应用

通过background-repeat和background-size可控制背景图平铺与尺寸。1. background-repeat取值有repeat、no-repeat、repeat-x、repeat-y、space、round，用于设置图像平铺方式；2. background-size取值包括auto、具体宽高、百分比、cover、contain，用于调整图像大小；3. 结合使用可实现如全屏背景图效果，常配background-position:center，使图像居中覆盖容器，提升页面视觉体验。

在网页设计中，背景图的显示效果对整体视觉体验影响很大。通过 background-repeat 和 background-size 这两个CSS属性，可以灵活控制背景图像的平铺方式和尺寸，让页面更美观、适配性更强。

background-repeat：控制背景图是否平铺

默认情况下，背景图会沿着水平和垂直方向重复平铺。使用 background-repeat 可以修改这一行为。

• repeat：默认值，图像在横向和纵向都平铺
• no-repeat：图像不平铺，只显示一次
• repeat-x：只在水平方向平铺
• repeat-y：只在垂直方向平铺
• space：图像不裁剪，用空白间距填满容器
• round：图像缩放以适应空间，避免留白

例如，设置一个不平铺的背景图：

div {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
}

background-size：调整背景图尺寸

这个属性用于定义背景图像的大小，特别适合响应式设计，让图片在不同设备上都能良好展示。

立即学习“前端免费学习笔记（深入）”；

AI Background Remover

AI背景移除工具，免费使用

67

查看详情

• auto：保持原始尺寸（默认）
• 100px 200px：指定具体宽高（可分别设置宽高）
• 50% 100%：按容器百分比缩放
• cover：等比例缩放图像，完全覆盖容器，可能裁剪
• contain：等比例缩放，完整显示图像，可能留白

比如让背景图撑满整个元素：

div {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

结合使用实现理想效果

实际开发中，这两个属性常一起设置。例如做一个全屏背景图区域：

.hero-section {
  width: 100%;
  height: 100vh;
  background-image: url('landscape.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

这样能确保背景图居中显示、充满视口，且不会重复出现。

基本上就这些。掌握 background-repeat 和 background-size 的搭配，就能轻松处理大多数背景图需求，让页面看起来更专业、更协调。

以上就是如何使用CSS设置元素背景平铺_background-repeat background-size应用的详细内容，更多请关注php中文网其它相关文章！