background-image 属性来设置。你可以根据需要调整背景图片的大小、重复方式、位置等。css复制代码/* styles.css */.background-container { width: 100%; height: 400px; /* 设置容器高度 */
background-image: url('https://example.com/image.jpg'); /* 背景图片的URL */
background-size: cover; /* 将背景图像等比缩放以完全覆盖容器 */
background-position: center; /* 背景图像居中显示 */
background-repeat: no-repeat; /* 禁止背景图片重复 */}background-image: 设置背景图片的 URL，指向需要用作背景的图片的路径或 URL。
background-size:
cover: 背景图像将会按比例缩放，以完全覆盖容器，不会有空白区域，但可能部分图像会被裁剪。
contain: 背景图像将按比例缩放，以完全适应容器，整个图像都会显示，但可能会有空白区域。
background-position: 设置背景图像的显示位置。
center: 背景图像居中显示。
top, bottom, left, right: 设置具体显示方位。
background-repeat: 设置背景图像是否重复。
no-repeat: 不重复背景图像。
repeat: 背景图像会在水平方向和垂直方向重复。
repeat-x: 只在水平方向重复。
repeat-y: 只在垂直方向重复。
html复制代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景图片示例</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="background-container"> <h1>这是一个带背景图片的容器</h1> <p>这里是一些文本内容</p> </div></body></html>
css复制代码/* styles.css */body { margin: 0; padding: 0; font-family: Arial, sans-serif;
}.background-container { width: 100%; height: 400px; background-image: url('https://example.com/image.jpg'); /* 替换成你实际的图片URL */
background-size: cover; background-position: center; background-repeat: no-repeat; color: white; /* 设置文字颜色 */
display: flex; justify-content: center; align-items: center; text-align: center;
}background-image: url(...)：指定背景图片的路径或 URL。
background-size: cover：让图片覆盖整个背景区域。
background-position: center：使背景图片居中显示。
background-repeat: no-repeat：防止背景图片重复。
该代码会创建一个容器，背景为指定的图片，文本内容居中显示且不被背景图片遮挡。你可以根据需求调整相关的 CSS 属性以获得不同的效果。