App下載

CSS怎么加背景圖片？附源碼！

猿友 2021-05-19 15:04:14 瀏覽數 (10690)

反饋

想必仔細的同學在瀏覽網頁時，會發(fā)現有的網站并不是單純的白色背景，而是有背景圖片。那么你知道 CSS 怎么加背景圖片？這篇文章告訴你。

background 屬性

在學習如何添加背景圖片前，我們需要先學習 background 屬性。它是專門用來設置背景色或者背景圖片的。

?background-color?: 設置背景顏色。
?background-position?: 設置背景圖像的位置。
?background-size?: 設置背景圖片的尺寸。
?background-repeat? : 設置是否重復背景圖像。
?background-origin?: 設置背景圖片的定位區(qū)域。
?background-clip?: 設置背景的繪制區(qū)域。
?background-attachment?: 設置背景圖像是否固定或者隨著頁面的其余部分滾動。
?background-image?: 設置背景圖片路徑。

其中設置背景圖片就需要用到 ?background-image?。

background-image:url(圖片路徑)

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS設置背景圖片 - 編程獅(w3cschool.cn)</title>
	<style type="text/css"> 
		body{
		   background: url("./image/img1.png") no-repeat;
		}
	</style>
</head>
<body>
</body>
</html>

實現效果：

CSS設置背景圖片