首頁 > 開發者 > JavaScript
CSS知識總結（七），css知識總結
CSS常用樣式
5.背景樣式
1）背景顏色
background-color : transparent | color
常用值：①英文單詞，②十六進位，③RGB或RGBA
另外，還有一種是 漸層色彩
漸層色彩(gradient)分為線性漸層(linear)和放射狀漸層(radial)
線性漸層：background: linear-gradient(direction, color1, color2, ...);
第一個參數省略時，預設為“180deg”，等同於“to bottom”。
第二個和第三個參數，表示顏色的起始點和結束點，可以有多個顏色值。(顏色值後面可以追加百分比，表示這個顏色要佔總背景顏色面積的百分比)
例子 原始碼：
/* CSS代碼 */.linear{ width:200px; height:100px; background:linear-gradient(to right,red 30%,yellow);}
<!-- HTML代碼 --><body> <div class="linear"></div></body>
效果：
放射狀漸層：background: radial-gradient(center, shape, size, color, color, ...);
可以指定漸層的中心、形狀（原型或橢圓形）、大小。
預設情況下，漸層的中心是 center（表示在中心點），漸層的形狀是 ellipse（表示橢圓形），漸層的大小是 farthest-corner（表示到最遠的角落）。
例子 原始碼：
/* CSS代碼 */.radial{ width:100px; height:100px; background:radial-gradient(circle, red, yellow, green);}
<!-- HTML代碼 --><body> <div class="radial"></div></body>
效果：
2）背景圖片
background-image : none | url(url)
例子 原始碼：
/* CSS代碼 */.image{ width:142px; height:55px; background-image:url(http://www.cnblogs.com/images/logo_small.gif);}
<!-- HTML代碼 --><body> <div class="image">後面的是背景</div></body>
效果：
後面的是背景
3）背景平鋪方式
background-repeat : repeat | no-repeat | repeat-x | repeat-y
例子1（repeat-x） 原始碼：
/* CSS代碼 */.x{ width:300px; height:200px; border:1px solid #000; background-image:url(http://www.cnblogs.com/images/logo_small.gif); background-repeat:repeat-x;}
<!-- HTML代碼 --><body> <div class="x"></div></body>
效果：
例子2（repeat-y） 原始碼：
/* CSS代碼 */.y{ width:300px; height:200px; border:1px solid #000; background-image:url(http://www.cnblogs.com/images/logo_small.gif); background-repeat:repeat-y;}
<!-- HTML代碼 --><body> <div class="y"></div></body>
效果：
4）背景定位
background-position : 靠左對齊方式 上對齊
①background-position:left bottom;
②background-position:50% 50px;
例子 原始碼：
/* CSS代碼 */.position{ width:300px; height:200px; border:1px solid #000; background-image:url(http://www.cnblogs.com/images/logo_small.gif); background-repeat:no-repeat; background-position:left bottom;}
<!-- HTML代碼 --><body> <div class="position"></div></body>
效果：
6）背景原點
設定元素背景圖片的原始起始位置。必須保證背景是background-repeat為no-repeat，此屬性才會生效。
background-origin : border-box | padding-box | content-box;
7）背景的顯示地區
設定背景映像向外裁剪的地區。
background-clip : border-box | padding-box | content-box;
8）背景尺寸
設定背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
background-size : length | percentage | cover | contain;
length : 設定背景映像的高度和寬度。
percentage : 以父元素的百分比來設定背景映像的寬度和高度。
cover : 把背景映像擴充至足夠大，以使背景映像完全覆蓋背景地區；但是背景映像的某些部分也許無法顯示在背景定位地區中。
contain : 把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區。
例子 原始碼：
/* CSS代碼 */.size1{ width:142px; height:55px; border:1px solid #000; background-image:url(http://www.cnblogs.com/images/logo_small.gif); background-repeat:no-repeat;}.size2{ width:142px; height:55px; border:1px solid #000; background-image:url(http://www.cnblogs.com/images/logo_small.gif); background-repeat:no-repeat; background-size:100px 30px;}
<!-- HTML代碼 --><body> 原大小： <div class="size1"></div> 改變大小後： <div class="size2"></div></body>
效果：
原大小：
改變大小後：
9）背景樣式縮寫
background : 背景色 背景圖片 背景平鋪方式 背景定位
例子 原始碼：
/* CSS代碼 */.bg{ width:200px; height:100px; border:1px solid #000; background:#ccc url(http://www.cnblogs.com/images/logo_small.gif) no-repeat center center;}
<!-- HTML代碼 --><body> <div class="bg"></div></body>
效果：
10）多重背景
一個元素可以設定多重背景映像，每組屬性間使用逗號分隔。
多重背景圖之間存在著重疊關係，前面的背景圖會覆蓋在後面的背景圖之上。
background : background-image background-repeat background-attachment background-position/background-size
background-origin background-clip background-color
background-image：指定對象的背景映像。可以是真實圖片路徑或使用漸層建立的“背景映像”。
background-repeat：指定對象的背景映像如何鋪排填充。
background-attachment：指定對象的背景映像是隨對象內容滾動還是固定的。
background-position：指定對象的背景映像位置。
background-size：指定對象的背景映像的尺寸大小。
background-origin：指定對象的背景映像顯示的原點。
background-clip：指定對象的背景映像向外裁剪的地區。
background-color：指定對象的背景顏色。
*注意：background-color只能設定一次，且由於寫在前面的背景會疊在之後的背景之上，所以背景色通常都定義在最後一組上，避免背景色將映像蓋住。
例子 原始碼：
/* CSS代碼 */.bg2{ width:200px; height:200px; border:1px solid #000; background:url(http://www.cnblogs.com/images/logo_small.gif) no-repeat scroll 10px 20px/115px 52px content-box padding-box,
url(http://www.cnblogs.com/images/logo_small.gif) no-repeat scroll 30px 40px/115px 52px content-box padding-box,
url(http://www.cnblogs.com/images/logo_small.gif) no-repeat scroll 50px 60px/115px 52px content-box padding-box #ccc;}
<!-- HTML代碼 --><body> <div class="bg2"></div></body>
效果：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
