Background
background屬性的簡寫用法, 常見背景屬性的理解以及神奇的漸變色沽一。
目錄
background屬性的簡寫用法
常見背景屬性介紹
神奇的漸變色
background屬性
background簡寫屬性在一個聲明中可設(shè)置所有的背景屬性耘拇。
可設(shè)置屬性如下:
-
background-image: 設(shè)置背景圖像, 可以是真實的圖片路徑, 也可以是創(chuàng)建的漸變背景; -
background-position: 設(shè)置背景圖像的位置; -
background-size: 設(shè)置背景圖像的大小; -
background-repeat: 指定背景圖像的鋪排方式; -
background-attachment: 指定背景圖像是滾動還是固定; -
background-origin: 設(shè)置背景圖像顯示的原點[background-position相對定位的原點]; -
background-clip: 設(shè)置背景圖像向外剪裁的區(qū)域; -
background-color: 指定背景顏色国觉。
簡寫的順序如下:
bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
順序并非固定, 但是要注意:
1贞岭、background-position 和 background-size 屬性, 之間需使用/分隔, 且position值在前, size值在后亩钟。
2、如果同時使用 background-origin 和 background-clip 屬性, origin屬性值需在clip屬性值之前, 如果origin與clip屬性值相同, 則可只設(shè)置一個值牲剃。
代碼示例:
background: url("image.png") 10px 20px/100px no-repeat content-box;
background是一個復(fù)合屬性, 可設(shè)置多組屬性, 每組屬性間使用逗號分隔, 其中背景顏色不能設(shè)置多個且只能放在最后一組遣疯。
如設(shè)置的多組屬性背景圖像之間存在重疊, 則前面的背景圖像會覆蓋在后面的背景圖像上。
代碼示例:
padding: 10px;
background: url("image.png") 0% 0%/60px 60px no-repeat padding-box,
url("image.png") 40px 10px/110px 110px no-repeat content-box,
url("image.png") 140px 40px/200px 100px no-repeat content-box #58a;
效果圖如下:
常見背景屬性
background-position
background-position 屬性用來設(shè)置背景圖像的位置, 默認值: 0% 0%, 效果等同于 left top凿傅。
取值說明:
1缠犀、 如果設(shè)置一個值, 則該值作用在橫坐標上, 縱坐標默認為50%(即center) ;
2、 如果設(shè)置兩個值, 則第一個值作用于橫坐標, 第二個值作用于縱坐標, 取值可以是方位關(guān)鍵字[left\top\center\right\bottom], 如 background-position: left center ; 也可以是百分比或長度, 百分比和長度可為設(shè)置為負值, 如: background-position: 10% 30px ;
3聪舒、 另外css3支持3個值或者4個值, 注意如果設(shè)置3個或4個值, 偏移量前必須有關(guān)鍵字, 如: background-position: right 20px bottom 30px;
示例圖如下:
也可以使用 background-position-x 或 background-position-y 來分別設(shè)置橫坐標或縱坐標的偏移量辨液。
注意: 當使用 background-position-x 以及 background-position-y 時, 需考慮Firefox兼容性的問題。
background-size
background-size屬性用來指定背景圖像的大小箱残。默認值: auto
取值說明:
1滔迈、 可使用長度值或百分比指定背景圖像的大小, 值不能為負值止吁。如果設(shè)置一個值, 則該值用于定義圖像的寬度, 圖像的高度為默認值 auto, 根據(jù)寬度進行等比例縮放; 如果設(shè)置兩個值, 則分別作用于圖像的寬和高。
2燎悍、 auto 默認值, 即圖像真實大小敬惦。
3、 cover 將背景圖像等比縮放到完全覆蓋容器, 背景圖像有可能超出容器间涵。(即當較短的邊等于容器的邊時, 停止縮放)
4仁热、 contain 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等, 背景圖像始終被包含在容器內(nèi)。(即當較長的邊等于容器的邊時, 停止縮放)
示例圖如下(圖片: 寬640px 高448px, 容器: 寬200px 高200px):
background-repeat
background-repeat 屬性用來設(shè)置背景圖像鋪排填充方式, 默認值: repeat 勾哩。
取值說明:
1抗蠢、repeat-x 表示橫向上平鋪, 相當于設(shè)置兩個值 repeat no-reapeat;
2、repeat-y 表示縱向上平鋪, 相當于設(shè)置兩個值 no-repeat repeat;
3思劳、repeat 表示橫向縱向上均平鋪;
4迅矛、no-repeat 表示不平鋪;
5、round 表示背景圖像自動縮放直到適應(yīng)且填充滿整個容器潜叛。 注意: 當設(shè)置為 round 時, background-size 的 cover 和 contain 屬性失效秽褒。
6、space 表示背景圖像以相同的間距平鋪且填充滿整個容器或某個方向. 注意: 當 background-size 設(shè)置為 cover 和 contain 時, background-rapeat 的 space 屬性失效威兜。
注意, background-repeat 的 round/space 屬性, 部分Firefox版本不支持销斟。
示例圖:
background-origin
用于設(shè)置 background-position 定位時參考的原點, 默認值 padding-box , 另外還有兩個值: border-box 和 content-box。
代碼示例:
border: 10px solid #58A;
padding: 20px;
background-position: 10px 20px;
示例圖:
background-clip
用于指定背景圖像向外裁剪的區(qū)域, 默認值 border-box , 另外還有兩個值: padding-box 和 content-box椒舵。
注意: 由于 background-origin 的默認值為 padding-box, 即背景圖像 background-image 的默認定位 background-position 參考的原點為 padding區(qū)域是[包含padding], 所以為了更好的了解 background-clip 幾個屬性值的特性, 可將 background-origin 設(shè)置為 border-box 蚂踊。
代碼示例:
background-color: #58a;
background-image: url("image.png");
background-repeat: no-repeat;
background-size: 120px 100px;
border: 10px dashed #fb3;
padding: 30px;
background-origin: border-box;
示例圖:
漸變圖像
在網(wǎng)頁設(shè)計中, 各種尺寸、顏色笔宿、角度的條紋圖案無處不在, 下面就來介紹一下如何使用CSS來創(chuàng)建條紋圖案犁钟。
利用CSS3新增的 linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() 屬性, 可實現(xiàn)各種意想不到的漸變圖像。
各種漸變效果圖:
線性漸變 linear-gradient()
第一個參數(shù): 可不寫, 默認值為 to bottom (即180%), 用來指定漸變的方向, 可是是具體的角度值, 也可以直接指定方位 to left/ to right/ to top/ to bottom泼橘。
為實現(xiàn)漸變, 還需要至少定義兩個顏色結(jié)點, 每個顏色節(jié)點可由兩個參數(shù)組成, [顏色值 位置值, 顏色值 位置值, ...], 其中顏色值為必填項, 位置值可為長度, 也可以是百分比, 非必填項涝动。
如: linear-gradient(red 30%, blue 80%); 表示: 容器頂部30%的區(qū)域被填充為紅色實色, 容器中間50%的高度區(qū)域被填充為從紅色到藍色的漸變色, 容器底部20%區(qū)域被填充為藍色實色。
各個參數(shù)之間只用逗號分隔炬灭。
實現(xiàn)簡單的漸變背景
簡單漸變示例:
代碼示例:
圖一: background: linear-gradient(#58a, #fb3);
圖二: background: linear-gradient(45deg, #58a, #fb3);
圖三: background: linear-gradient(to right, #58a 20%, #fb3 60%);
漸變填充區(qū)域為容器中間40%的高度區(qū)域, 其他區(qū)域填充的顏色為實色醋粟。
實現(xiàn)條紋效果
當相鄰兩個顏色的位置值相同時, 顏色之間會產(chǎn)生無限小的過渡區(qū)域。其產(chǎn)生的效果和條紋一樣重归。
效果圖:
代碼示例:
圖一: background: linear-gradient(#58a 50%, #fb3 50%);
圖二: background: linear-gradient(#58a 33%, #fb3 33%, #fb3 66%, #e45b5a 66%);
圖三: background: linear-gradient(#58a 40%, #fb3 0);
CSS圖像(第三版)規(guī)范: 如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小, 則該色標的位置值會被設(shè)置為它前面所有色標位置值的最大值米愿。
所以上述示例中, 圖三第二個顏色的位置值 0 即表示 40%; 圖二中代碼也可以替換為: linear-gradient(#58a 33%, #fb3 0, #fb3 66%, #e45b5a 0);
實現(xiàn)條紋背景
剛剛已經(jīng)實現(xiàn)了簡單的條紋效果, 接下來實現(xiàn)簡單的條紋背景, 這里需要借助 background-size 來控制每一塊條紋背景的大小, 并且 background-repeat 應(yīng)該設(shè)置為 repeat。
效果圖:
代碼示例:
圖一:
background: linear-gradient(#58a 50%, #fb3 0);
background-size: 100% 40px;
圖二:
background: linear-gradient(to right, #58a 33%, #fb3 0, #fb3 66%, #e45b5a 0);
background-size: 50px 100%;
斜向條紋背景的實現(xiàn)
如果只是簡單的設(shè)置一個角度, 是不能實現(xiàn)斜向條紋背景的, 如下圖所示:
圖一將漸變條紋旋轉(zhuǎn)了45度, 圖二設(shè)置切片大小后進行重復(fù), 并不能實現(xiàn)斜向條紋背景提前。
代碼示例:
圖一:
background: linear-gradient(45deg, #58a 50%, #fb3 0);
圖二:
background: linear-gradient(45deg, #58a 50%, #fb3 0);
background-size: 50px 50px;
為了實現(xiàn)斜向條紋背景, 聯(lián)想使用位圖生成條紋的方法, 將切片設(shè)置稱為四條條紋, 如下圖所示:
代碼示例:
圖一:
background: linear-gradient(45deg, #58a 25%, #fb3 0, #fb3 50%, #58a 0, #58a 75% #fb3 0);
圖二:
background: linear-gradient(45deg, #58a 25%, #fb3 0, #fb3 50%, #58a 0, #58a 75% #fb3 0);
background-size: 50px 50px;
上述的方法有局限性, 如果想實現(xiàn)30度或者其他角度的斜向條紋, 使用剛剛的方法效果則會很糟糕, 如下圖:
background: linear-gradient(30deg, #58a 25%, #fb3 0, #fb3 50%, #58a 0, #58a 75% #fb3 0);
各種角度的斜向條紋
如果想實現(xiàn)各種角度的斜向條紋, CSS3提供了很好的方法, linear-gradient() 的超級版 repeating-linear-gradient() 吗货。
repeating-linear-gradient()
用重復(fù)的線性漸變創(chuàng)建圖像, 語法與 linear-gradient() 相同泳唠。
代碼示例:
圖一:
background: repeating-linear-gradient(45deg, #58a, #58a 10px, #fb3 0, #fb3 20px);
圖二:
background: repeating-linear-gradient(70deg, #58a, #58a 15px, #fb3 0, #fb3 30px, #e45b5a 0, #e45b5a 45px);
圖三:
background: repeating-linear-gradient(30deg, #58a, #58a 20px, #fb3 0, #fb3 40px);
使用 repeating-linear-gradient() 的好處是, 不需要借助 background-size 控制大小, 而且角度可以隨意設(shè)置狈网。
這里需要注意: 使用 repeating-linear-gradient() 實現(xiàn)漸變時, 用法與 linear-gradient() 有一點點不同。repeating-linear-gradient() 必須明確指定每一個顏色的范圍值, 而 linear-gradient() 可以適當省略, 詳解如下:
如: 實現(xiàn)一個簡單的黃藍漸變, 漸變范圍為容器中間60%區(qū)域。
效果圖:
代碼示例:
使用 linear-gradient() 實現(xiàn)(可簡寫):
background: linear-gradient(#fb3 20%, #58a 80%);
或者:
background: linear-gradient(#fb3, #fb3 20%, #58a 80%);
或者:
background: linear-gradient(#fb3, #fb3 20%, #58a 80%, #58a 100%);
使用 repeating-linear-gradient() 實現(xiàn)(必須寫明每一個顏色范圍值):
background: repeating-linear-gradient(#fb3, #fb3 20%, #58a 80%, #58a 100%);
其他條紋背景以及缺角背景的實現(xiàn)
效果圖:
代碼示例:
圖一:
background: linear-gradient(0, rgba(200, 0, 0, 0.5) 50%, transparent 0),
linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0);
background-size: 20px;
圖二:
background: linear-gradient(0, rgba(200, 0, 0, 0.5) 1px, transparent 0),
linear-gradient(90deg, rgba(200, 0, 0, 0.5) 1px, transparent 0);
background-size: 20px;
圖三:
background: linear-gradient(0, #fff 1px, transparent 0),
linear-gradient(90deg, #fff 1px, transparent 0),
linear-gradient(0, #fff 4px, transparent 0),
linear-gradient(90deg, #fff 4px, transparent 0), #58a;
background-size: 20px, 20px, 40px, 40px;
圖四:
background: linear-gradient(-125deg, #fff 15px, #58a 0);
圖五:
background: linear-gradient(125deg, #fff 15px, #58a 0),
linear-gradient(-125deg, #fff 15px, #58a 0);
background-size: 50% 100%;
background-position: left, right;
background-repeat: no-repeat;
圖六:
background: linear-gradient(125deg, #fff 15px, #58a 0),
linear-gradient(-125deg, #fff 15px, #58a 0),
linear-gradient(45deg, #fff 15px, #58a 0),
linear-gradient(-45deg, #fff 15px, #58a 0);
background-size: 50% 50%;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;
徑向漸變 radial-gradient()
第一組參數(shù)用來指定漸變的類型[shape]拓哺、漸變的半徑長度[size]勇垛、以及圓心的位置[position]。
shape 指定漸變的類型 circle[圓形漸變] 和 ellopse[橢圓形漸變] ;
size 半徑長度為具體的長度值, 其中橢圓形漸變的半徑長度可以用百分比士鸥。
也可以用以下四種指定半徑長度:
closest-side：半徑長度為從圓心到離圓心最近的邊
closest-corner：半徑長度為從圓心到離圓心最近的角
farthest-side：半徑長度為從圓心到離圓心最遠的邊
farthest-corner：半徑長度為從圓心到離圓心最遠的角
position 確定圓心的位置, 值必須跟在 at 后闲孤。如果提供2個參數(shù)，第一個表示橫坐標烤礁，第二個表示縱坐標讼积；如果只提供一個，第二值默認為50%脚仔，即center 位置可以是具體的長度也可以是百分比勤众。另外也可以用方位表示。橫坐標可取的方位值有left鲤脏、center们颜、right, 縱坐標可取的方位值有top、center猎醇、bottom窥突。
注意: 當漸變類型為 circle[圓形漸變] 時, 只能指定一個size值, 即直徑; 當漸變類型為 ellopse[橢圓形漸變] 時, 需要指定兩個個size值, 即水平半徑, 垂直半徑。
為實現(xiàn)漸變, 還需要至少定義兩個顏色結(jié)點, 每個顏色節(jié)點可由兩個參數(shù)組成, [顏色值 位置值, 顏色值 位置值, ...], 其中顏色值為必填項, 位置值可為長度, 也可以是百分比, 非必填項硫嘶。
如: radial-gradient(red 30%, blue 80%);
各個參數(shù)之間只用逗號分隔阻问。
簡單的徑向漸變?nèi)缦聢D示例:
代碼示例:
圖一:
background: radial-gradient(#58A, #FB3)
圖二:
background: radial-gradient(50px, #58A, #FB3)
圖三:
background: radial-gradient(70px, #58A, #FB3, #e45b5a);
圖四:
background: radial-gradient(ellipse 50px 70px, #58A, #FB3);
圖五:
background: radial-gradient(ellipse 50px 70px at left top, #58A, #FB3);
圖六:
background: radial-gradient(ellipse 50px 70px at 60px bottom, #58A, #FB3);
徑向漸變實現(xiàn)波點背景
代碼示例:
圖一:
background: radial-gradient(rgba(200, 0, 0, 0.5) 30%, transparent 0);
background-size: 40px;
圖二:
background: radial-gradient(rgba(200, 0, 0, 0.5) 30%, transparent 0),
radial-gradient(rgba(200, 0, 0, 0.5) 30%, transparent 0);
background-size: 40px;
background-position: 0 0 , 20px 20px;
repeating-radial-gradient()
用重復(fù)的徑向漸變創(chuàng)建圖像。語法與radial-gradient()相同, 也可以實現(xiàn)一些有意思的效果, 如下圖:
background: repeating-radial-gradient(rgba(200, 0, 0, 0.5) 0, rgba(200, 0, 0, 0.5) 20px, transparen
