<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>35-背景平鋪屬性</title> <style> /* div{ width: 500px; height: 500px; } .box1{ background-image: url(images/girl.jpg); background-repeat: repeat-y; } */ /* body{ background-image: url(images/bg2.jpg); } */ div{ width: 980px; height: 60px; background-image: url(images/1.png); } </style> </head> <body> <!-- 1.如何控制背景圖片的平鋪方式? 在CSS中有一個background-repeat屬性, 就是專門用於控制背景圖片的平鋪方式的 取值: repeat 默認, 在水平和垂直都需要平鋪 no-repeat 在水平和垂直都不需要平鋪 repeat-x 只在水平方向平鋪 repeat-y 只在垂直方向平鋪 快捷鍵 bgr background-repeat: 應用場景: 可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度 --> <div class="box1"></div> </body> </html>