CSS背景图片全攻略：30字精通

原创于 2025-10-08 03:10:29 发布 · 237 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5 #csdn

CSS图片背景属性详解

CSS提供了多种属性用于控制元素的背景图片，以下是常用属性和用法：

background-image

设置元素的背景图片，支持多张图片叠加。

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

background-repeat

控制背景图片的重复方式。

div {
  background-repeat: no-repeat; /* 不重复 */
  background-repeat: repeat-x;  /* 水平重复 */
  background-repeat: repeat-y;  /* 垂直重复 */
}

background-position

设置背景图片的起始位置。

div {
  background-position: center;  /* 居中 */
  background-position: 20px 50%;  /* x轴20px，y轴50% */
}

background-size

控制背景图片的尺寸。

div {
  background-size: cover;  /* 覆盖整个元素 */
  background-size: contain;  /* 完整显示图片 */
  background-size: 100px 200px;  /* 指定宽高 */
}

background-attachment

决定背景图片是否随页面滚动。

div {
  background-attachment: fixed;  /* 固定位置 */
  background-attachment: scroll;  /* 随元素滚动 */
}

background-origin

指定背景图片的定位区域。

div {
  background-origin: padding-box;  /* 相对于内边距框 */
  background-origin: border-box;   /* 相对于边框框 */
  background-origin: content-box;  /* 相对于内容框 */
}

background-clip

设置背景图片或颜色的绘制区域。

div {
  background-clip: border-box;
  background-clip: padding-box;
  background-clip: content-box;
}

background-color

设置背景颜色，可与背景图片同时使用。

div {
  background-color: #f0f0f0;
}

简写属性

使用background简写属性可以一次性设置多个背景属性。

div {
  background: #f0f0f0 url('image.jpg') no-repeat center / cover fixed;
}