詳解css樣式之background屬性

background用法詳解：

1、background-color 屬性設定元素的背景顏色

    可能的數值

    color_name            規定為色彩名稱的背景色彩（如red）

    hex_number     背景顏色（例如#ff0000）

    

rgb_number          規定顏色值為rgb 程式碼的背景顏色（如rgb(255,0,0)o#o# c coo 

預設背景顏色為透明

2、background-image

屬性設定元素的背景

圖片    可能的值

#    單一背景圖片：background-image:url(a.png)

    多個背景圖片：background-image:url(a.png),url(b.png)

    線性漸變：background-image:-webkit（-repeating）-linear-gradient(方向,顏色值像素或百分比,顏色值像素或百分比...)

                   方向

:left

##:left

#right,top,bottom,90deg,180deg                    顏色值像素或百分比:yellow 10%,transparent 4px, 0,0) 2px

    徑向漸層：background-image:-webkit（-repeating）-radial-gradient([8ea77861baf3de4581e8ad662920728a || 0c0cb308ee3d2ee3281772bfc9b806c2 ,]? [ec35be6607164a78df77d8be1b74f032:預設為center                    18b1d935585fae6b48e00ea5f5b48e2d:circle,ellipse

 sest-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，fixed7、

background-clip

屬性用來規定背景的繪圖區域

    可能的值：border-box,

padding

-box,content-box8、background-origin 屬性用來規定background-position 屬性相對於什麼位置來定位

    可能的值：border-box,padding-box,content-box擴充功能：繪製方格

#html程式碼

e388a4556c0f65e1904146cc1a846bee使用背景绘制方格，使每个文字都在方格里，效果图如下。94b3e26ee717c64999d7867364b1b4a3

##css程式碼

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

結果

使用背景繪製方格，使每個文字都在方格里，效果圖如下。

 

以上是詳解css樣式之background屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！