background用法詳解：
1、background-color 屬性設置元素的背景顏色
可能的值
color_name 規定顏色值為顏色名稱的背景顏色（比如 red）
hex_number 規定顏色值為十六進制值的背景顏色（比如 #ff0000）
rgb_number 規定顏色值為 rgb 代碼的背景顏色（比如 rgb(255,0,0)
transparent 默認 背景顏色為透明
2、background-image 屬性設置元素的背景圖片
可能的值
單個背景圖片：background-image:url(a.png)
多個背景圖片：background-image:url(a.png),url(b.png)
線性漸變：background-image:-webkit（-repeating）-linear-gradient(方向,顏色值 像素或百分比,顏色值 像素或百分比...)
方向:left,right,top,bottom,90deg,180deg
顏色值 像素或百分比:yellow 10%,transparent 4px,rgb(0,0,0) 2px
徑向漸變：background-image:-webkit（-repeating）-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)
<bg-position>:默認為center
<shape>:circle,ellipse
<size>:closest-side,farthest-side,closest-corner,farthest-corner,contain or cover
3、background-size 屬性用來重設背景圖片大小
contain：縮小背景圖片使其適應標簽元素
cover ： 背景圖片放大延伸到整個標簽元素大小
像素 ： 標明背景圖片縮放的尺寸大小
百分比 ：百分比是根據內容標簽元素大小，來縮放圖片的尺寸大小
4、background-position 屬性用來設置背景圖片位置
可能的值：left,right,top,bottom,center,像素,百分比
5、background-repeat 屬性用來設置背景圖片位置
可能的值：repeat,repeat-x,repeat-y,no-repeat,space(不會被裁剪或改變大小),round(不會被裁剪但是會改變圖像大小)
6、background-attachment 屬性用來設置背景圖片是否可以滾動
可能的值：scroll，fixed
7、background-clip 屬性用來規定背景的繪制區域
可能的值：border-box,padding-box,content-box
8、background-origin 屬性用來規定 background-position 屬性相對於什么位置來定位
可能的值：border-box,padding-box,content-box
擴展：繪制方格
html代碼
<div>使用背景繪制方格，使每個文字都在方格里，效果圖如下。</div>
css代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
div {
width: 300px;
height: 300px;
border-left: 3px solid pink;
border-top: 3px solid pink;
background-image: -webkit-linear-gradient(180deg, pink 3px, transparent 3px) , -webkit-linear-gradient(90deg, pink 3px, transparent 3px);
background-size: 30px;
line-height: 30px;
font-size:25px;
letter-spacing: 5px;
}
|
結果