CSS背景
我们设置 CSS 背景时，我们可以使用以下属性：
- background-color：设置背景颜色
- background-image：设置背景图像
- background-repeat：设置背景图像的重复方式
- background-position：设置背景图像的位置
- background-attachment：设置背景图像是否随着页面滚动
下面是一些使用这些属性的示例：
css
代码解读
复制代码
/* 设置背景颜色 */ body { background-color: #f5f5f5; } /* 设置背景图像 */ div { background-image: url("background.jpg"); } /* 设置背景图像的重复方式 */ div { background-image: url("background.jpg"); background-repeat: no-repeat; } /* 设置背景图像的位置 */ div { background-image: url("background.jpg"); background-position: center; } /* 设置背景图像是否随着页面滚动 */ div { background-image: url("background.jpg"); background-attachment: fixed; }
CSS背景属性还有一些其他常用的属性：
background-image：用于设置背景图片，可以设置一个或多个背景图像，多个背景图像之间用逗号分隔。如果指定了多个背景图像，那么第一个图像位于最上面，最后一个图像位于最下面。
示例代码：
css
代码解读
复制代码
body { background-image: url("bg.jpg"); }
2. background-repeat：用于设置背景图片是否重复，有以下属性值：
repeat：默认值，表示背景图像在水平方向和垂直方向上重复；repeat-x：表示背景图像在水平方向上重复；repeat-y：表示背景图像在垂直方向上重复；no-repeat：表示背景图像不重复。
示例代码：
css
代码解读
复制代码
body { background-image: url("bg.jpg"); background-repeat: no-repeat; }
3. background-size：用于设置背景图片的大小，有以下属性值：
-
auto：默认值，表示背景图像的大小按照原始大小显示； -
cover：背景图像尽可能覆盖整个容器； -
contain：背景图像在保持原始宽高比的情况下尽可能覆盖整个容器； -
length：用具体的长度值设置背景图像的大小； -
percentage：用百分比设置背景图像的大小。
示例代码：
css
代码解读
复制代码
body { background-image: url("bg.jpg"); background-size: cover; }
4. background-position：用于设置背景图片的位置，有以下属性值：
-
left top：默认值，表示背景图像在容器的左上角； -
left center：表示背景图像在容器的左侧居中； -
left bottom：表示背景图像在容器的左下角； -
center top：表示背景图像在容器的顶部居中； -
center center：表示背景图像在容器的中心； -
center bottom：表示背景图像在容器的底部居中； -
right top：表示背景图像在容器的右上角； -
right center：表示背景图像在容器的右侧居中； -
right bottom：表示背景图像在容器的右下角。
示例代码：
css
代码解读
复制代码
body { background-image: url("bg.jpg"); background-position: center top; }
5. background-attachment：用于设置背景图片是否随着页面滚动，有以下属性值：
-
scroll：默认值，表示背景图像随着页面滚动； -
fixed：表示背景图像不随着页面滚动。
示例代码：
css
代码解读
复制代码
body { background-image: url(" ");\n background-size: cover;\n}"
作者：新中地GIS开发学习站
链接：https://juejin.cn/post/7426658921279012916
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。