CSS屬性（背景屬性）
阿新 • • 發佈：2019-01-06
1.背景屬性
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05背景相關屬性示例</title> <style> /* 背景顏色 */ .c0 { background-color: red; } /* 背景圖片 */ /*.c1 {*/ /*width: 600px;*//*height: 600px;*/ /*border: 1px solid black; !* 邊框，1畫素，顏色是黑色 *!*/ /*background-image: url("huluwa.png");*/ /*background-repeat: no-repeat; !* 背景圖片不平鋪 *!*/ /*!*background-position: center; !* 背景圖片在中間區域，也可用50% 50% *!*!*/ /*!*background-position: 50% 50%;*!*/ /*background-position: 200px 200px; !* 向x軸和y軸各偏移200畫素*!*/ /*}*/ /* 簡寫上面的.c1 */ .c1 { width: 600px; height: 600px; border: 1px solid black; /* 邊框，1畫素，顏色是黑色 */ background: url("huluwa.png") no-repeat 50% 50%; /* 簡寫成一條 */ } </style> </head> <body> <div class="c0">我是div</div> <div class="c1"></div> </body> </html>
（1）一個滑鼠滾動背景圖不動的例子
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06背景不動效果示例</title> <style> .c1 { height: 500px; background-color: red; } .c2 { height: 500px; background: url("huluwa.png") no-repeat center; background-attachment: fixed; /* 將背景圖片固定住，這樣在滑鼠上限滾動時，這個圖片固定住 */ } .c3 { height: 500px; background-color: green; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>