1. 程式人生 > >CSS 背景相關屬性

CSS 背景相關屬性

背景相關屬性——background

一、背景顏色——background-color
	屬性值:具體顏色單詞、rgb、rgba、十六進位制

在這裡插入圖片描述 渲染後的結果

二、背景圖片——background-image
	屬性值:url()

在這裡插入圖片描述 在這裡插入圖片描述 注意點: 1、url()中放置圖片的地址, 圖片的地址可以是本地的地址, 也可以是網路的地址 2、如果圖片的大小沒有標籤的大小大, 那麼會自動在水平和垂直方向平鋪來填充 3、如果網頁上出現了圖片, 那麼瀏覽器會再次傳送請求獲取圖片

二、背景平鋪——background-repeat
	屬性值: repeat/預設值,水平垂直都需要平鋪;
			norepeat/不平鋪;
			repeat-x/只在水平方向上平鋪;
			repeat-y/只在垂直方向上平鋪

在這裡插入圖片描述

在這裡插入圖片描述

三、背景定位——background-position
	控制背景圖片的位置
	屬性值: 具體方位名詞;
			水平方向 :left  center  right ;
			垂直方向  top  center  bottom;

在這裡插入圖片描述

四、背景屬性連寫——background
	屬性值可以省略

在這裡插入圖片描述 在這裡插入圖片描述

四、背景關聯——background-attachment
	屬性值:scroll;預設值,會隨著滾動條的滾動而滾動;
		   fixed;不會隨著滾動條的滾動而滾動
		   快捷鍵:ba background-attachment:;
		   
五、插入圖片和背景圖片的區別
	插入圖片:佔位置;
			有定位屬性,方便控制位置;
			使用的圖片經常更換時,使用。
	背景圖片: 裝飾圖;
			無定位屬性;
			不經常更換的圖片。