css关于背景图片的设置1

如果你想让背景图片不重复显示，你可以使用 background-repeat 属性，并设置为 no-repeat。例如：

body {
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
}

如果你想让背景图片填充整个背景区域，但不改变图片的比例，你可以使用 background-size 属性，并设置为 contain 或者 cover。例如：

body {
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
  background-size: contain; /* 或者 cover */
}

如果你想让背景图片居中显示，你可以使用 background-position 属性，并设置为 center
。例如：

body {
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

• 使用 background-color 属性设置背景颜色，与背景图片相配合，填补两边空白
  。例如：

body {
  background-color: #b0c4de; /* 设置背景颜色 */
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
}

• 使用 background-origin 属性设置背景图片的原点位置，可以是内容区、内边距区或者边框区
  。例如：

body {
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
  background-origin: border-box; /* 设置背景图片的原点为边框区 */
}

• 使用 background-clip 属性设置背景图片的裁剪范围，可以是内容区、内边距区或者边框区
  。例如：

body {
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
  background-clip: padding-box; /* 设置背景图片的裁剪范围为内边距区 */
}

• 使用 background-attachment 属性设置背景图片是否随着页面滚动或者固定在视口
  。例如：

body {
  background-image: url('img/3.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; /* 设置背景图片固定在视口 */
}