css背景图background-image如何添加

使用background-image属性通过url()引入图片路径可设置CSS背景图，如background-image: url(‘images/bg.jpg’)；路径支持相对、绝对及网络地址；常配合background-repeat、background-size、background-position和background-attachment优化显示效果；也可用background简写属性合并设置，如background: url(‘bg.jpg’) no-repeat center/cover。

在CSS中添加背景图使用 background-image 属性，最常用的方式是通过 url() 引入图片路径。下面详细介绍如何正确设置背景图。

基本语法

使用 background-image 添加背景图的格式如下：

background-image: url(‘图片路径’);

例如：

div {
  background-image: url(‘images/bg.jpg’);
}

设置图片路径

路径可以是相对路径、绝对路径或网络地址：

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

• 相对路径：相对于当前CSS文件的位置，如 url(../images/banner.png)
• 绝对路径：从网站根目录开始，如 url(/assets/img/photo.jpg)
• 网络地址：适用于在线图片，如 url(https://example.com/bg.jpg)

常用配合属性

单独使用 background-image 可能不够，通常还需设置以下属性来优化显示效果：

• background-repeat：控制是否平铺，常用值 no-repeat
• background-size：设置背景图大小，如 cover（充满容器）或 100% 100%（拉伸填满）
• background-position：定位图片位置，如 center 居中显示
• background-attachment：是否随滚动，如 fixed 实现视差效果

示例：

div {
  background-image: url(‘bg.jpg’);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

简写形式

可以使用 background 简写属性一次性设置多个选项：

div {
  background: url(‘bg.jpg’) no-repeat center/cover;
}

其中 center/cover 表示 position / size 的简写方式。

基本上就这些。只要路径正确，并合理设置重复、尺寸和位置，背景图就能正常显示。不复杂但容易忽略细节。