background-image 屬性來設(shè)置。你可以根據(jù)需要調(diào)整背景圖片的大小、重復(fù)方式、位置等。css復(fù)制代碼/* styles.css */.background-container { width: 100%; height: 400px; /* 設(shè)置容器高度 */
background-image: url('https://example.com/image.jpg'); /* 背景圖片的URL */
background-size: cover; /* 將背景圖像等比縮放以完全覆蓋容器 */
background-position: center; /* 背景圖像居中顯示 */
background-repeat: no-repeat; /* 禁止背景圖片重復(fù) */}background-image: 設(shè)置背景圖片的 URL，指向需要用作背景的圖片的路徑或 URL。
background-size:
cover: 背景圖像將會按比例縮放，以完全覆蓋容器，不會有空白區(qū)域，但可能部分圖像會被裁剪。
contain: 背景圖像將按比例縮放，以完全適應(yīng)容器，整個圖像都會顯示，但可能會有空白區(qū)域。
background-position: 設(shè)置背景圖像的顯示位置。
center: 背景圖像居中顯示。
top, bottom, left, right: 設(shè)置具體顯示方位。
background-repeat: 設(shè)置背景圖像是否重復(fù)。
no-repeat: 不重復(fù)背景圖像。
repeat: 背景圖像會在水平方向和垂直方向重復(fù)。
repeat-x: 只在水平方向重復(fù)。
repeat-y: 只在垂直方向重復(fù)。
html復(fù)制代碼<!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>這里是一些文本內(nèi)容</p> </div></body></html>
css復(fù)制代碼/* 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; /* 設(shè)置文字顏色 */
display: flex; justify-content: center; align-items: center; text-align: center;
}background-image: url(...)：指定背景圖片的路徑或 URL。
background-size: cover：讓圖片覆蓋整個背景區(qū)域。
background-position: center：使背景圖片居中顯示。
background-repeat: no-repeat：防止背景圖片重復(fù)。
該代碼會創(chuàng)建一個容器，背景為指定的圖片，文本內(nèi)容居中顯示且不被背景圖片遮擋。你可以根據(jù)需求調(diào)整相關(guān)的 CSS 屬性以獲得不同的效果。