轻松掌握：如何将背景图片巧妙融入CSS设计

一、背景图片的基本设置

1. 背景图片属性

• background-image: url('image_url');
  

2. 背景图片实例

.div-bg {
  width: 300px;
  height: 200px;
  background-image: url('bg.jpg');
  background-color: #f0f0f0;
}

<div class="div-bg">背景图片示例</div>

二、背景图片的定位

1. 背景定位属性

background-position: x y;

其中，x 和 y 分别代表水平方向和垂直方向的偏移量，可以使用像素、百分比或关键字（如 top、right、bottom、left）来设置。

2. 背景定位实例

.div-bg {
  width: 300px;
  height: 200px;
  background-image: url('bg.jpg');
  background-position: 0 0;
}

三、背景图片的大小调整

1. 背景大小属性

background-size: width height;

其中，width 和 height 可以使用像素、百分比、cover 或 contain 等值来设置。

2. 背景大小实例

.div-bg {
  width: 300px;
  height: 200px;
  background-image: url('bg.jpg');
  background-size: 100% 100%;
}

四、多背景应用

background-image: url('bg1.jpg'), url('bg2.jpg');

.div-bg {
  width: 300px;
  height: 200px;
  background-image: url('bg1.jpg'), url('bg2.jpg');
}