你以為你懂 CSS 背景？再想想
作者：前端小智
無論是高清攝影、細膩漸變，還是可復用的紋理圖案，背景圖在網頁設計中都至關重要。這份指南將深入講解?CSS?background-image：它如何工作、如何高效使用，以及一些能讓你頁面出彩的進階技巧。
你是否曾打開一個網站，就被它驚艷的背景一眼拿下？
無論是高清攝影、細膩漸變，還是可復用的紋理圖案，背景圖在網頁設計中都至關重要。
這份指南將深入講解 CSS background-image：它如何工作、如何高效使用，以及一些能讓你頁面出彩的進階技巧。
讀完后，你就能像專業(yè)開發(fā)者一樣，自信地為元素應用與定制背景圖！
什么是 background-image？
background-image 是 CSS 中非常強大的樣式工具：它允許你為任意 HTML 元素設置圖片（或漸變）作為背景。
基本語法
selector {
background-image: url('path-to-image.jpg');
}url()：指定你的圖片路徑。- 默認情況下，背景圖會從左上角開始繪制。
- 如果圖片小于元素大小，它會在水平與垂直方向重復鋪滿。
背景控制的關鍵屬性
background-image 常與其他背景相關屬性搭配，來精細控制顯示效果。逐個拆解如下。
1）background-repeat —— 是否重復？
默認情況下，背景圖會重復以填滿整個元素。你可以這樣控制：
selector {
background-repeat: repeat; /* 默認：在兩個方向都重復 */
background-repeat: no-repeat; /* 只顯示一次，不重復 */
background-repeat: repeat-x; /* 僅水平重復 */
background-repeat: repeat-y; /* 僅垂直重復 */
}
適用場景：
- ?? 大幅 Hero 背景圖：用
no-repeat。 - ?? 頂部紋理條（導航欄紋理）：用
repeat-x。
2）background-size —— 調整背景圖尺寸
定義背景圖如何在容器內縮放：
selector {
background-size: auto; /* 默認，原始尺寸 */
background-size: cover; /* 覆蓋整個元素（可能被裁切） */
background-size: contain; /* 完整顯示（不裁切，可能留空） */
background-size: 50% 80%; /* 自定義寬度與高度 */
}cover：非常適合全屏背景。contain：確保背景圖完整可見（適合 Logo 等）。
3）background-position —— 背景圖出現在哪里？
控制背景圖的起始位置：
selector {
background-position: top left; /* 默認左上 */
background-position: center; /* 居中 */
background-position: 20% 50%; /* 自定義 X/Y 位置 */
}- Hero 圖：用
center居中展示主體。 - 右下角水?。河?nbsp;
right bottom。
4）background-attachment —— 固定還是隨滾動？
決定背景圖是隨頁面滾動還是固定在視口：
selector {
background-attachment: scroll; /* 默認：隨滾動移動 */
background-attachment: fixed; /* 固定不動（可做視差效果） */
}小技巧：
fixed能營造視差滾動（parallax）的效果，在現代設計中很常見。
進階技巧
漸變作為背景
你可以用 CSS 漸變替代圖片，獲得絲滑的顏色過渡：
selector {
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}示例： 按鈕、標題區(qū)或極簡背景都很適合。
多重背景（疊加）
一個元素可以同時疊加多張背景圖/漸變：
selector {
background-image:
url('pattern.png'),
linear-gradient(to bottom, #333, #000);
background-repeat: repeat, no-repeat; /* 第一層平鋪，第二層不重復 */
}常見坑 & 最佳實踐
1）優(yōu)化圖片體積大圖會拖慢站點。用 TinyPNG 等工具先壓縮。
2）設置后備背景色圖片加載失敗時，至少還有一個背景色兜底：
selector {
background-color: #f0f0f0; /* 兜底顏色 */
background-image: url('image.jpg'); /* 主背景圖 */
}3）響應式適配不同屏幕要測試。用媒體查詢調整 background-size 等：
@media (max-width: 768px) {
selector {
background-size: contain; /* 小屏完整顯示 */
}
}實戰(zhàn)示例
示例 1：全屏 Hero 背景
.hero {
background-image: url('hero-bg.jpg');
background-size: cover; /* 覆蓋屏幕 */
background-position: center; /* 居中主體 */
background-repeat: no-repeat; /* 不重復 */
height: 100vh; /* 視口高度 */
}示例 2：細膩紋理 + 漸變疊加
.header {
background-image:
url('subtle-pattern.png'),
linear-gradient(to right, #4a6fa5, #166088);
background-repeat: repeat, no-repeat; /* 紋理平鋪，漸變不重復 */
}掌握 background-image 能為你的網站打開無窮創(chuàng)意： 無論是照片、漸變還是圖案，CSS 都給了你足夠的控制力。
責任編輯：武曉燕
來源：
大遷世界
