css樣式之background詳解，cssbackground詳解

css樣式之background詳解，cssbackground詳解
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代碼

 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;    }

結果

使用背景繪製方格，使每個文字都在方格裡，如下。