HTML设置背景图片与平铺控制

想让网页瞬间提升视觉质感？只需掌握CSS中background-image、background-repeat、background-position、background-size和background-attachment这五大核心属性，你就能轻松实现背景图片的精准控制——无论是居中不平铺、全屏覆盖（cover）、完整显示（contain），还是固定不动的视差滚动效果；从基础设置到高级优化，本文用简洁示例带你一步到位，让每一张背景图都成为页面设计的点睛之笔。

在网页设计中，设置背景图片能让页面更具视觉吸引力。通过CSS可以轻松为HTML元素添加背景图片，并控制其显示方式，比如是否平铺、位置、大小等。

使用CSS设置背景图片

HTML本身不直接支持背景图片设置，需借助CSS的background-image属性来实现。最常见的是为标签设置背景，也可以应用于任意块级元素，如div。

基本语法如下：

示例代码：

其中bg.jpg是图片文件路径，可以是相对路径或绝对URL。

控制背景图片平铺（重复）

默认情况下，背景图片会横向和纵向重复平铺整个元素。若想关闭平铺，可使用background-repeat属性。

常用取值包括：

• repeat：默认值，图片横向纵向都重复
• no-repeat：不重复，图片只显示一次
• repeat-x：仅横向重复
• repeat-y：仅纵向重复

例如，防止图片平铺：

调整背景图片的位置与大小

除了平铺，还可以进一步优化背景显示效果。

定位背景图片：使用background-position设定图片起始位置。

• 可使用关键词如center、top、left
• 也可用像素或百分比，如50% 50%居中显示

缩放图片以适应屏幕：使用background-size。

• cover：图片缩放以完全覆盖容器，可能裁剪
• contain：完整显示图片，可能留白
• 100% 100%：拉伸填满整个区域

示例：让背景图居中、不平铺、全屏覆盖：

固定背景滚动（视差效果）

若希望背景图不随页面滚动，像“固定”在屏幕上，可用background-attachment。

• scroll：随内容滚动（默认）
• fixed：背景固定，产生视差效果

示例：

基本上就这些关键设置。掌握background-image、background-repeat、background-position、background-size和background-attachment，就能灵活控制网页背景图片的呈现效果。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~