深入掌握CSS背景圖片：從基礎到實戰

背景圖片：

本文將通過系統化的講解+實戰案例，幫助讀者徹底掌握CSS背景圖片的六大核心知識點。每個知識點都包含對比演示和記憶技巧，建議結合代碼實操學習。

一、背景圖片基礎設置

使用background-image（路徑）屬性設置背景圖

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1000px;height: 1000px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>

?運行結果：

注意事項：

必須設置容器尺寸（width/height），否則不可見
默認情況下圖片會平鋪滿整個盒子

二、背景平鋪模式詳解

通過background-repeat控制平鋪方式：

屬性值	效果描述	適用場景
repeat	默認雙向平鋪	紋理/圖案背景
no-repeat	禁止平鋪	獨立展示的圖片
repeat-x	水平平鋪	橫向漸變/裝飾線條
repeat-y	垂直平鋪	縱向裝飾元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖片的平鋪方式</title><style>body{display: flex;}.one{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: no-repeat;}.two{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: repeat-x;margin-left: 50px;}.three{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: repeat-y; margin-left: 50px;}.four{width: 500px;height: 500px;background-image: url(./images/haimian-baby.jpg);background-color: #00f6d9;background-repeat: no-repeat;background-repeat:repeat;margin-left: 50px;}</style>
</head>
<body><div class="one">no-repeat不平鋪</div><div class="two">repeat-水平平鋪</div><div class="three">repeat-y豎直平鋪</div><div class="four">repeat平鋪</div>
</body>
</html>

運行結果：

三、精準定位背景圖片

通過background-position控制顯示位置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖位置</title><style>div {width: 1000px;height: 1000px;background-color: #00f6d9;background-image: url(./images/haimian-baby.jpg);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0;background-position: left top; *//* 右下角 *//* background-position: right bottom; *//* 垂直和水平都居中 */background-position: center;/* 水平：正數向右，負數向左*//* background-position: 100px 200px; *//* background-position: center 50px; *//* 關鍵字書寫可以顛倒位置 *//* background-position: top right; *//* 關鍵字可以只寫一個，另一個默認居中 *//* background-position: left; *//* 只寫一個數字表示水平方向，垂直方向居中 *//* background-position: 100px; */}</style>
</head>
<body><div></div>
</body>
</html>

?運行結果：

四、背景縮放高級技巧

background-size的三種核心用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖縮放</title><style>div {/* 工作中圖片的比例和盒子的比例一致 */width: 400px;height: 300px;background-color: #df9595;background-image: url(./images/haimian-baby.jpg);background-repeat: no-repeat;/* contain：縮放圖片以適應背景區域，可能會留白。 */background-size: contain;/* cover：縮放圖片以完全覆蓋背景區域，可能會裁剪圖片。 *//* background-size: cover; *//* 100% 圖片的寬度和盒子的寬度一樣，圖片的高度按照圖片比例等比例縮放 *//* background-size: 100%; */}</style>
</head>
<body><div></div>
</body>
</html>

運行結果：

五、視差滾動效果實現

通過background-attachment控制滾動行為：

屬性值	滾動效果	性能影響
scroll	隨元素滾動（默認）	低
fixed	相對視口固定	中
local	隨元素內容滾動	高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖片固定</title><style>div{height: 400px;background-image: url(./images/haimian-baby.jpg);background-repeat: no-repeat;/* 背景圖固定 */background-attachment: fixed;overflow:scroll;}</style>
</head>
<body><div><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p><p>測試文字，阿輝十多個貴啊高度公司iu廣東省法規是丟茍富貴IG對對對對</p>
</div>
</body>
</html>

運行結果：

滾動文字的時候，圖片不會和文字一起滾動?

六、復合屬性高效寫法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景復合屬性</title><style>div{width: 2000px;height: 2000px;/* 背景色，背景圖  背景圖平鋪方式  背景圖位置 /背景圖縮放 背景圖固定(沒有順序之分) */background:pink url(./images/haimian-baby.jpg) repeat-y center /auto;}</style>
</head>
<body><div></div>
</body>
</html>

運行結果：