CSS圖片如何平鋪網(wǎng)頁(yè)

在CSS中，圖片平鋪網(wǎng)頁(yè)是一個(gè)常見的需求，要實(shí)現(xiàn)圖片平鋪，可以使用CSS的background-image屬性，并結(jié)合repeat屬性來指定圖片的重復(fù)方式，以下是一些示例代碼，展示如何實(shí)現(xiàn)圖片平鋪網(wǎng)頁(yè)：

示例1: 水平平鋪圖片

body {
  background-image: url('your-image-url');
  background-repeat: repeat-x;
}

示例2: 垂直平鋪圖片

body {
  background-image: url('your-image-url');
  background-repeat: repeat-y;
}

示例3: 水平和垂直都平鋪圖片

body {
  background-image: url('your-image-url');
  background-repeat: repeat;
}

示例4: 圖片不重復(fù)，只平鋪一次

body {
  background-image: url('your-image-url');
  background-repeat: no-repeat;
}

示例5: 圖片居中平鋪

body {
  background-image: url('your-image-url');
  background-repeat: repeat;
  background-position: center;
}

示例6: 圖片拉伸平鋪

body {
  background-image: url('your-image-url');
  background-repeat: repeat;
  background-size: 100% 100%; /* 圖片拉伸到100%的寬度和高度 */
}

示例7: 圖片固定位置平鋪（不隨頁(yè)面滾動(dòng)）

body {
  background-image: url('your-image-url');
  background-repeat: repeat;
  position: fixed; /* 圖片固定在瀏覽器窗口 */
}