CSS學習（九）-CSS背景

最後更新：2017-08-07 來源：互聯網

上載者：User

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

標籤：otto oct bsp type demo cli blog 尺寸 track

一、理論：
1.background-break
a.bounding-box 背景映像在整個內嵌元素中進行平鋪
b.each-box 背景映像在行內中進行平鋪
c.continuous 下一行的背景映像緊接著上一行中的映像繼續平鋪
以上僅在firefox下可用
2.css多背景
a.background-image 設定元素背景圖片民，可用相對位址或絕對位址索引背景映像
b.background-repeat 設定元素背景映像的平鋪方式預設repeat
c.background-size 設定元素背景映像的尺寸大小預設auto
d.background-attachment 設定元素的背景圖片是否固定預設scroll
e.background-clip 控制元素背景映像顯示地區大小,預設border-box
f.background-color 設定元素背景顏色
g.多個屬性中間必須用","分開
h.最先聲明的背景圖片將會居於最上層，最後指定的圖片放於最底層

二、實踐：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        body{            background: #000 url(images/2-11-test.jpg) center center fixed no-repeat;            -moz-background-size: cover;            -webkit-background-size: cover;            -o-background-size: cover;            background-size: cover;        }        @media only all and (max-width:1024px) and (max-height: 768px){            body{                -moz-background-size: 1024px 768px;                -webkit-background-size: 1024px 768px;                -o-background-size: 1024px 768px;                background-size: 1024px 768px;            }        }        @media only all and (max-width:640px) and (max-height: 480px){            body{                -moz-background-size: 640px 480px;                -webkit-background-size: 640px 480px;                -o-background-size: 640px 480px;                background-size: 640px 480px;            }        }    </style></head><body>    <div></div>    <div class="div1" ></div>    <div class="div2" ></div>    <div class="div3" ></div>    <div class="div4" ></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .demo{            width: 500px;            height: 300px;            border:20px solid rgba(104,105,168,0.5);            border-radius: 10px;            padding: 80px 60px;            color:#123589;            font-size: 25px;            line-height: 1.5;            text-align: center;        }        .multipleBg{            background: url("images/round-box1.jpg") no-repeat left top,            url("images/round-box-2.jpg") no-repeat right top,            url("images/border-radius.jpg") no-repeat left bottom,            url("images/tabs-image.jpg") no-repeat right bottom,            url("images/border.jpg") no-repeat right bottom;            -webkit-background-origin: border-box,border-box,border-box,border-box,padding-box;            -moz-background-origin: border-box,border-box,border-box,border-box,padding-box;            -o-background-origin: border-box,border-box,border-box,border-box,padding-box;            background-origin: border-box,border-box,border-box,border-box,padding-box;            -moz-background-clip: border-box;            -webkit-background-clip: border-box;            -o-background-clip:border-box;            background-clip: border-box;        }    </style></head><body>    <div class="demo multipleBg">用五張背景圖片做出這種效果</div></body></html>

CSS學習（九）-CSS背景

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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