想必仔細(xì)的同學(xué)在瀏覽網(wǎng)頁(yè)時(shí)，會(huì)發(fā)現(xiàn)有的網(wǎng)站并不是單純的白色背景，而是有背景圖片。那么你知道 CSS 怎么加背景圖片？這篇文章告訴你。
background 屬性
在學(xué)習(xí)如何添加背景圖片前，我們需要先學(xué)習(xí) background 屬性。它是專(zhuān)門(mén)用來(lái)設(shè)置背景色或者背景圖片的。
- ?
background-color?: 設(shè)置背景顏色。 - ?
background-position?: 設(shè)置背景圖像的位置。 - ?
background-size?: 設(shè)置背景圖片的尺寸。 - ?
background-repeat? : 設(shè)置是否重復(fù)背景圖像。 - ?
background-origin?: 設(shè)置背景圖片的定位區(qū)域。 - ?
background-clip?: 設(shè)置背景的繪制區(qū)域。 - ?
background-attachment?: 設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。 - ?
background-image?: 設(shè)置背景圖片路徑。
其中設(shè)置背景圖片就需要用到 ?background-image?。
background-image:url(圖片路徑)示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS設(shè)置背景圖片 - 編程獅(w3cschool.cn)</title>
<style type="text/css">
body{
background: url("./image/img1.png") no-repeat;
}
</style>
</head>
<body>
</body>
</html>實(shí)現(xiàn)效果：
不難發(fā)現(xiàn)，由于圖片過(guò)小，實(shí)現(xiàn)效果欠佳，背景圖片并不能鋪滿(mǎn)整個(gè)屏幕。在《CSS怎么設(shè)置背景圖片自適應(yīng)全屏？附源碼！》一文中，介紹了如何設(shè)置背景圖片自適應(yīng)全屏，感興趣的同學(xué)可以自行回顧，此處就不在介紹。
以上就是文章“CSS 怎么加背景圖片？附源碼！”的詳細(xì)內(nèi)容，更多 CSS 學(xué)習(xí)請(qǐng)前往 w3cschool。
