背景
目錄
1、背景顏色background-color
2、背景圖片
3死讹、背景重復(fù)性background-repeat
4、背景圖位置background-position
5曲梗、背景圖固定性background-attachment
6赞警、背景尺寸background-size
7、背景修剪background-clip
8虏两、背景源background-origin
9仅颇、背景background
10、背景漸變
background-color
1.background屬性
定義： 用于定義元素的背景色
2.背景色覆蓋到哪個(gè)區(qū)域停止碘举？
邊框，但不會(huì)超出邊框
3.background-color可以定義漸變色嗎搁廓？
不可以
4.背景顏色值的寫(xiě)法有幾種引颈？
- 十六進(jìn)制 #ff0000
- 英文單詞 red
- rgb()
- rgba(紅，綠境蜕，藍(lán)蝙场，alpha)
- rgba(0-255,0-255,0-255,0-1)
- hsl()
- hsla(色相，飽和度粱年，明度售滤，不透明度)
- hsla取值范圍：(0-360,0-100%，0-100%，0-1)
背景圖片
'./'表示根目錄
'./'表示當(dāng)前目錄
'../'表示返回上一級(jí)目錄
背景重復(fù)性
background-repeat: repeat; /默認(rèn)重復(fù)/
background-repeat: repeat-x; /水平重復(fù)/
background-repeat: repeat-y; /垂直重復(fù)/
background-repeat: no-repeat; /不重復(fù)/
背景圖位置
background-position: 水平偏移完箩，垂直偏移;
background-position: 0 0; 像素單位
background-position: 0% 0%; /百分比單位/
background-position: left top; /關(guān)鍵詞單位/
背景圖固定性
background-attachment: fixed; /fixed ：無(wú)論是主視口還是元素視口赐俗，背景都不會(huì)動(dòng)/
background-attachment: local; /*背景圖跟隨主視口和元素視口都會(huì)一起動(dòng)*/
background-attachment: scroll; /*默認(rèn)值：背景圖跟隨主視口一起動(dòng)，不跟隨元素視口一起動(dòng)*/
背景尺寸
background-size: auto;/根據(jù)圖片的原始寬高級(jí)比例計(jì)算背景圖尺寸/
background-size: cover; /圖片必須覆蓋整個(gè)原始弊知，圖片的局部可能無(wú)法顯示/
background-size: contain; /* 元素必須包含整個(gè)圖片,元素的局部可能會(huì)出現(xiàn)空白 */
background-size: 240px 240px;
background-size: 240px auto; /值一杯解析為寬度阻逮，auto按比例自動(dòng)調(diào)整寬度/
background-size: 100% 100%; /參照元素去計(jì)算/
背景修剪
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;
background-clip: text; /讓圖片顯示在文本中/
背景源
background-origin: content-box;
background-origin: padding-box;
background-origin: border-box; /默認(rèn)/
背景
background: 背景圖片，重復(fù)性秩彤，位置叔扼，固定性，大小漫雷，;
背景漸變
- 線性漸變
- 徑向漸變
- 角度漸變
漸變是什么瓜富？
定義：指兩種顏色之間的平滑過(guò)度
線性漸變是什么？
定義：指兩種顏色之間按照直線方法平滑過(guò)度降盹。
徑向漸變是什么与柑？
定義：指兩種顏色之間按照射線方式平滑過(guò)度。
角度漸變是么澎现？
定義：指兩種顏色之間按照360°旋轉(zhuǎn)方式平滑過(guò)度仅胞。
設(shè)置漸變的屬性時(shí)哪個(gè)？
定義：background-image
線性漸變語(yǔ)法：
background-image: linear-gradient(漸變角度剑辫，顏色停止列表);
徑向漸變語(yǔ)法：
radial-gradient(漸變形狀(circle,ellipse) 漸變位置干旧，顏色列表)
radial-gradient(漸變形狀，顏色列表)
角度漸變語(yǔ)法：
conic-gradient（from 角度妹蔽，顏色列表）
conic-gradient(at 位置椎眯，顏色列表)
