css3新增背景
背景線性漸變
background: linear-gradient();
第一個(gè)參數(shù): (角度 或者是一個(gè)線性的方向)可選的 默認(rèn)的是(to bottom) 旋轉(zhuǎn)的方向是順時(shí)針的
第二個(gè)參數(shù): 開始顏色 color 或者是百分比 或者是長(zhǎng)度
第三個(gè)參數(shù): 結(jié)束顏色
背景平鋪
repeating-linear-gradient
徑向漸變
background: radial-gradient()
圓形(橢圓) 半徑大小 圓心位置 color color+
圓或者橢圓 關(guān)鍵字 圓心位置 color color+
關(guān)鍵字:
extent-keyword=closest-side|farthest-side|closest-corner|farthest-corner
background: radial-gradient(closest-side,red,blue);離圓心最近的那條邊 圓要經(jīng)過(guò)這4個(gè)邊
background: radial-gradient(circle,red,blue);
當(dāng)一個(gè)圓沒有設(shè)置大小的時(shí)候是以是最遠(yuǎn)的角 farthest-corner為準(zhǔn)
background: radial-gradient(circle 100px,red,blue);
background: radial-gradient(red,blue);
當(dāng)橢圓的相對(duì)位置是對(duì)于原點(diǎn)(0,0)來(lái)說(shuō),且橢圓經(jīng)過(guò)farthest-corner這個(gè)點(diǎn),那么橢圓x軸半徑和y軸半徑的比例等于圓心到closest-side的距離
background: radial-gradient(100px 50px,red,blue);不關(guān)心形狀,只關(guān)心大小
background: radial-gradient(100px 50px at 0 0,red,blue);設(shè)置圓心的位置
背景平鋪
background: repeating-radial-gradient(red 10px,blue 20px);
Background-origin
Box=border-box|padding-box|content-box背景圖片的坐標(biāo)
background-origin: padding-box;默認(rèn)
background-origin: border-box;邊框的位置
background-origin: content-box;內(nèi)容的位置
背景裁剪
background-clip: border-box;默認(rèn)值 content-box padding-box
Background-size:大小|| 百分比|| cover|| contain
background-size: cover;盡可能大,讓圖片撐滿整個(gè)容器
background-size: contain;盡可能大,寬度和高度不能超過(guò)容器的寬高