App下載

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

猿友 2021-05-19 15:04:14 瀏覽數(shù) (9532)
反饋

想必仔細的同學在瀏覽網頁時，會發(fā)現(xiàn)有的網站并不是單純的白色背景，而是有背景圖片。那么你知道 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>

實現(xiàn)效果：

CSS設置背景圖片

不難發(fā)現(xiàn)，由于圖片過小，實現(xiàn)效果欠佳，背景圖片并不能鋪滿整個屏幕。在《CSS怎么設置背景圖片自適應全屏？附源碼！》一文中，介紹了如何設置背景圖片自適應全屏，感興趣的同學可以自行回顧，此處就不在介紹。

以上就是文章“CSS 怎么加背景圖片？附源碼！”的詳細內容，更多 CSS 學習請前往 w3cschool。


CSS

0 人點贊