App下載

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

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

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

background 屬性

在學(xué)習(xí)如何添加背景圖片前，我們需要先學(xué)習(xí) background 屬性。它是專門用來設(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è)置背景圖像是否固定或者隨著頁面的其余部分滾動。
  • ?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>

實現(xiàn)效果：

CSS設(shè)置背景圖片

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

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


CSS

0 人點贊