css背景background屬性常用於定義HTML的背景，background簡寫屬性作用是將背景屬性設置在一個聲明中，background背景屬性常見為以下這些：.background-color代表背景顏色 .background-image代表背景圖像 .background-repeat 代表背景圖像水平或者垂直平鋪 .background-attachment代表背景圖像是否固定或者隨着頁面的其余部分滾動 .background-position代表設置背景圖像的起始位置 在這些背景效果中background-color屬性定義了元素的背景顏色,顏色值通常以以下方式定義:十六進制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"顏色名稱 - 如："red" 具體用下面的代碼展示說明下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS背景background</title> <style type="text/css"> /*background-color:定義元素背景色*/ div{ /*顏色值通常以以下方式定義:十六進制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"顏色名稱 - 如："red"*/ color: #f90; color: rgb(red, green, blue); color: royalblue; color: rgb(255,255,255); background-color: blueviolet; } /*background-image:定義元素背景圖像*/ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); } /*background-repeat:代表背景圖像水平或者垂直平鋪*/ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); background-repeat: repeat-x;/*圖像水平平鋪*/ background-repeat: repeat-Y;/*圖像垂直平鋪*/ background-repeat: no-repeat;/*圖像拒絕平鋪*/ } /*background-position代表設置背景圖像的起始位置*/ /* 提示：為 background-position 屬性提供值有很多方法。首先， 可以使用一些關鍵字：top、bottom、left、right 和 center；其次，可以使用長度值，如 100px 或 5cm；最后也可以使用百分數值。不同類型的值對於背景圖像的放置稍有差異。 */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); background-position:left top; } /* background-attachment代表背景圖像是否固定或者隨着頁面的其余部分滾動 */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); background-repeat: no-repeat; background-position:800px 1000px;/*圖像將在元素內邊距向右移動800px，向下移動1000px*/ background-attachment: fixed; } /* background背景簡寫 */ /* div{ background: color image repeat attachment position; } */ </style> </head> <body> <div>如何在頁面滾動齒輪的時候實現背景圖不動，選擇 background-attachmn:fixed</div> <!-- 100個換行符 br*100敲下enter鍵 --> </body> </html>