首頁 > web前端 > css教學 > 主體

詳解css樣式之background屬性

高洛峰
發布: 2017-03-15 11:01:36
原創
1899 人瀏覽過

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([position

> || ,]? [:預設為center                    :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程式碼

<p>使用背景绘制方格,使每个文字都在方格里,效果图如下。</p>
登入後複製

##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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板