在網(wǎng)站設(shè)計(jì)中，我們常常需要用到圖片來展示信息或者美化頁面，但是當(dāng)圖片大小小于背景區(qū)域時(shí)，我們需要將圖片平鋪填滿整個(gè)背景區(qū)域。那么如何通過 CSS 實(shí)現(xiàn)圖片平鋪呢？ 首先，我們需要設(shè)置背景圖片的樣式，使用 background-image 屬性來指定圖片的來源，其語法如下：

p{
background-image:url("example.jpg");
}

接著，我們需要設(shè)置背景圖片的重復(fù)方式，使用 background-repeat 屬性來指定圖片重復(fù)的方式，常用的值有 repeat（默認(rèn)值，橫向和縱向均重復(fù)）、repeat-x（僅橫向重復(fù)）、repeat-y（僅縱向重復(fù)）和 no-repeat（不重復(fù)），語法如下：

p{
background-repeat:repeat;
}

此外，我們還需要設(shè)置背景圖片的位置，使用 background-position 屬性來指定圖片在背景區(qū)域中的位置，常用的值有 left top（左上角）、left center（左邊居中）、left bottom（左下角）、center top（上面居中）、center center（居中）、center bottom（下面居中）、right top（右上角）、right center（右邊居中）和 right bottom（右下角），語法如下：

p{
background-position:center center;
}

如果我們需要讓圖片自適應(yīng)背景區(qū)域的大小，可以使用 background-size 屬性來指定背景圖片的大小，其語法如下：

p{
background-size: cover;
}

其中，cover 值可以讓背景圖片自適應(yīng)容器大小，并保持寬高比；contain 值則可以讓圖片適應(yīng)容器大小，但可能會(huì)出現(xiàn)留白。 最后，我們來看一下完整的示例代碼：

p{
background-image:url("example.jpg");
background-repeat:repeat;
background-position:center center;
background-size:cover;
}

通過上述 CSS 屬性的設(shè)置，就可以讓圖片平鋪填滿背景區(qū)域了。為了適應(yīng)不同的頁面寬度，我們可以使用媒體查詢來設(shè)置不同的背景圖片大小或者位置。