本篇文章為大家展示了如何使用background屬性,代碼簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
成都創(chuàng)新互聯公司于2013年創(chuàng)立,是專業(yè)互聯網技術服務公司,擁有項目網站建設、成都網站制作網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元柘榮做網站,已為上家服務,為柘榮各地企業(yè)和個人服務,聯系電話:13518219792
background屬性是CSS的一個簡寫屬性,可以在一個聲明中設置所有的背景屬性:背景顏色,背景圖像、圖像的位置、大小、定位區(qū)域、繪畫區(qū)域,如何重復背景圖像、背景圖像是否固定或者隨著頁面的其余部分滾動。
CSS background屬性
作用:background 簡寫屬性在一個聲明中設置所有的背景屬性。
基本語法:
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
參數:
background-color:指定要使用的背景顏色。
background-image: 指定要使用的一個或多個背景圖像。
background-position:定背景圖像的位置。
background-size:指定背景圖片的大小。
background-repeat : 指定如何重復背景圖像。
background-origin : 指定背景圖像的定位區(qū)域。
background-clip 指定背景圖像的繪畫區(qū)域。
background-attachment: 設置背景圖像是否固定或者隨著頁面的其余部分滾動。
注:IE8 以及更早的瀏覽器不支持一個元素多個背景圖像。
說明:如果上述的值缺少一個也沒關系,例如:可以只設置背景圖片,background:url('smiley.gif') no-repeat;
CSS background屬性的使用示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>創(chuàng)新互聯(php.cn)</title> <meta charset="utf-8"> <style> body { background: #00ff00 url('/upload/otherpic63/5c6a208c1ad5b114.gif') no-repeat fixed center; } </style> </head> <body> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> <p>這是一些測試文本。</p> </body> </html>
效果圖:
上述內容就是如何使用background屬性,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。
分享題目:如何使用background屬性
分享URL:http://www.rwnh.cn/article28/jipocp.html
成都網站建設公司_創(chuàng)新互聯,為您提供手機網站建設、企業(yè)網站制作、網站導航、動態(tài)網站、網站營銷、關鍵詞優(yōu)化
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯