HTML5怎么设置多张背景_HTML5多背景图CSS3设置技巧-html教程-PHP中文网

HTML5怎么设置多张背景_HTML5多背景图CSS3设置技巧

雪夜

发布： 2025-10-24 15:23:01

原创

991人浏览过

html5怎么设置多张背景_html5多背景图css3设置技巧

在HTML5中设置多张背景图，实际上依赖的是CSS3提供的多背景图像功能。HTML5本身不直接控制样式，而是通过CSS3来实现复杂的视觉效果，包括多背景图的叠加显示。

使用CSS3 background属性设置多张背景图

你可以通过在background-image或简写的background属性中添加多个背景路径，用逗号分隔，来实现多背景图的设置。靠前的背景图会显示在上层，后面的在下层。

基本语法如下：

background-image: url('top.png'), url('bottom.jpg');
background-position: center, center;
background-repeat: no-repeat, repeat;
background-size: cover, auto;

也可以合并写成一行：

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

Cutout.Pro抠图

AI批量抠图去背景

查看详情

background: url('top.png') center no-repeat, url('bottom.jpg') center repeat;

控制每张背景图的显示效果

多背景图的关键在于精确控制每张图的位置、尺寸和重复方式。常用属性包括：

background-position： 设置每个背景图的定位，如center top、10px 20px
background-size： 可分别为每张图设置尺寸，比如一张设为cover，另一张为50px 50px
background-repeat： 控制是否平铺，常用值有no-repeat、repeat-x等

示例：一张全屏背景图 + 一个角落的装饰图标

body {
  background: url('decoration-icon.png') 20px 20px no-repeat,
          url('main-bg.jpg') center center cover;
  height: 100vh;
  margin: 0;
}