首頁 > 開發者 > CSS

CSS–背景(Background)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

background:

background為符合屬性.屬性如下:

background:background-color ||background-image || background-repeat || background-attachment || background-position

 

background-color:

預設值:tansparent

取值 描述(背景顏色) 例子 效果
transparent 背景顏色透明 
    <div style="background-color:Aqua">        <span style="border:solid 1px black">span</span><br />        div    </div>
color 指定顏色
1.系統定義的顏色
2.rgb(100,100,100)
3.#FFEE11		 
    <div style="background-color:Silver">和諧社會</div>    <div style="background-color:rgb(100,200,90)">和諧社會</div>    <div style="background-color:#ff11f6">和諧社會</div>

 

background-image:

預設值:none

取值 描述(背景圖片) 例子 效果
none 沒有背景圖片 
    <div style="background-image:none">Background</div>
url(url)


使用絕對或相對的url指定背景圖片

 
    <div style="background-image:url('del.gif')"></div>

 

background-repeat:

預設值:repeat

取值 描述(背景平鋪) 例子 效果
repeat 在橫向和縱向上平鋪 
 
<div style="background-image:url('del.gif'); background-repeat:repeat"></div>
no-repeat 不平鋪 
<div style="background-image:url('del.gif'); background-repeat:no-repeat"></div>
repeat-x 在橫向上平鋪 
<div style="background-image:url('del.gif'); background-repeat:repeat-x"></div>
repeat-y 在縱向上平鋪 
<div style="background-image:url('del.gif'); background-repeat:repeat-y"></div>

 

background-attachment:

預設值:scroll

取值 描述(背景滾動) 例子 效果
scroll 跟隨內容滾動 
<body  style="background-image:url('del.gif'); background-repeat:no-repeat;     background-attachment:scroll"></body>
 隨著捲軸的移動,可能就看不到了.
fixed 不論怎樣滾動,始終固定在頁面上 
<body  style="background-image:url('del.gif'); background-repeat:no-repeat;     background-attachment:fixed "></body>
 始終顯示

 

background-position:

預設值:0% 0%

如果只指定了一個值，該值將用於橫座標。縱座標將預設為 50% 。如果指定了兩個值，第二個值將用於縱座標。

表達 例子 效果
background-position: length || length
百分數 | 由浮點數字和單位標識符組成的長度值		 
<div style="background-image:url('del.gif'); background-position:10px 10px;      background-repeat:no-repeat">    </div><br /><div style="background-image:url('del.gif'); background-position:50% 50%;      background-repeat:no-repeat"></div>
background-position:position||position

第一個position: top center bottom
第二個position: left center right

 
 
<div style="background-image:url('del.gif'); background-position:left center;     background-repeat:no-repeat">    </div><br /><div style="background-image:url('del.gif'); background-position:center center;     background-repeat:no-repeat"></div>

 

屬性名稱 取值 預設值
background-position-x length/left/center/right 0%
background-position-y length/top/center/bottom 0%

 

layer-background-color:

取值 描述 例子 效果
transparent 背景色透明    
color 指定顏色    

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
background effects in css parallax css background css background alpha css parallax background image parallax background css parallax css background image scroll background image css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More