css3 background

時間 2019-11-12

標籤 css3 css background 欄目 CSS 简体版

原文原文鏈接

background是一個很重要的css屬性，在css3中新增了不少內容。一方面是原有屬性新增了屬性值，另外一方面就是新增了3個屬性。css

1、css3中新增屬性值介紹

css2的background有5個屬性，縮寫以下：html

background:background-color,background-image,background-repeat ,background-attachment, background-position;

其中background-image,background-repeat和background-position在css3中都增長了新的屬性值。css3

一、background-image

css3中background-image能夠設置多個背景圖片，用法：background-image:url(),url()。ide

對於多重背景圖須要注意如下幾點：學習

a、背景圖順序

背景圖以層的形式顯示，多個背景圖從上往下分佈，第一個背景圖在最頂層，因此添加多個背景圖須要注意順序以及圖片透明度。網站

舉例：url

兩個div的背景圖同樣，順序相反。spa

<style>
div{
  width: 200px;
  height: 200px;
  border: 5px dotted pink;
  background-repeat: no-repeat;
  display: inline-block;
}
.bg{
  background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif);
}
.bg2{
  background-image: url(img/bg_flower_2.gif),url(img/bg_flower.gif);
}
</style>
</head>
<body>
<p>兩張背景圖：尺寸同樣，第一張透明，第二張不透明<p>
<img src="img/bg_flower.gif"/><img  src="img/bg_flower_2.gif" />
<div class="bg">
</div>
<div class="bg2">
</div>
</body>

View Code

分析：由於背景圖以層的形式顯示，第一個添加的在最上層。因此上左圖中第一個背景圖在上且透明就能夠產生很漂亮的重疊效果，第二個由於不透明的背景圖在上就覆蓋了第二個圖片，因此看不到下面的圖片。設計

這點和box-shadow很類似。一個box有多重陰影時，多個陰影從上往下分佈，第一個陰影在最頂層。瞭解更多可參考《css3 box-shadow》3d

b、語法縮寫

用'，'隔開每組background的縮寫值；若是有 size 值，須要緊跟 position 而且用 "/" 隔開；

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

Note:縮寫時必須把background-color設置在最底層，才能生效。若是將background-color添加到其餘層，語法錯誤整個規則都被忽略，不會顯示。

舉例：

<style>
div{
  width: 200px;
  height: 200px;
  border: 5px dotted pink;
  display: inline-block;
}
.bg3{
  background: url(img/bg_flower.gif) no-repeat,url(img/bg_flower_2.gif) no-repeat blue;
}
.bg4{
  background: url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif) no-repeat blue;
}
</style>
</head>
<body>
<p>兩張背景圖：尺寸同樣，第一張透明，第二張不透明<p>
<img src="img/bg_flower.gif"/><img  src="img/bg_flower_2.gif" />
<div class="bg3"></div>
<div class="bg42"></div>
</body>

View Code

分析：上圖左一，background-color寫在最底層，生效。左二中，給第一層加了一個background-color:yellow;整個規則無效。

c、拆分寫法

或者將縮寫拆分開寫：若是有多個背景圖片，而其餘屬性只有一個（例如 background-repeat 只有一個），代表全部背景圖片應用該屬性值；一樣background-color只能設置一個。

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

d、背景圖和漸變

漸變用法是這樣：background-image:linear-gradient(...);可見漸變是背景圖的一種特例，即用代碼生成了一張背景圖。瞭解更多漸變可參考《css3 Gradient背景》

既然漸變也是背景圖，在多重背景的時候固然能夠用了。

.bg5{
  background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;
}
<div class="bg5"></div>

整體來講，css3中新增的多重背景圖，選擇好的圖片，使用得當能夠出奇制勝，達到意想不到的效果。

二、background-repeat

對應背景圖的平鋪，必須說明一點：默認狀況，背景圖在x軸和y軸平鋪，儘管起始於padding-box左上角，可是其各個方向朝外平鋪，延伸到border區域。這點很重要，在下面background-origin時也要說到。

a、css3增長到2個屬性值

css3中，可使用兩個repeat代替一個值。第一個爲x軸，第二個爲y軸。好比background-repeat: repeat no-repeat;和background-repeat: repeat-x;等價。

css2中背景圖的重複方式只有repeat，repeat效果就像貼瓷磚同樣，若是不能整數個整好放置，超出部分就被裁剪掉了。css3新增了space和round屬性值，在repeat基礎上對重複的過程作到更好的把控，盡善盡美。

b、css3新增屬性值space

將背景圖在水平和垂直方向平鋪且不裁剪。兩端對齊，中間填補空白，背景圖大小不變。

c、css3新增屬性值round

將背景圖在水平和垂直方向平鋪且不裁剪。可是背景圖片可能被拉伸或縮短。

repeat，space和round對比舉例：

原本想找個合適的小點的圖片，沒找到，那就拿文章後面資源連接裏一個背景圖來舉例好了。

原做者的例子在這裏。

就是這隻羊，原圖信息：

好大一隻羊，我在作demo時設置了background-size:100px 100px，這個屬性後面會介紹。

代碼：

<style>
div{
  width: 240px;
  height: 240px;
  border: 1px solid pink;
  display: inline-block;
  background-image: url(img/sheep.png);
  background-size: 100px 100px;
  background-color: green;
  color: red;
}
.repeat{
  background-repeat: repeat;
}
.space{
  background-repeat: space;
}
.round{
  background-repeat: round;
}
.round1{
  background-repeat: round;
  width:250px;
}
</style>
<body>
  <div class="repeat">repeat</div>
  <div class="space">space</div>
  <div class="round">round四舍</div>
  <div class="round1">round五入</div>
</body>

效果：

分析：

首先，我設定div的尺寸爲240px*24px,img的尺寸爲100px*100px。

repeat的狀況，背景圖從左上角開始沿着x軸和y軸平鋪，背景圖大小不變，多餘被裁剪，如上圖左1。

space的狀況，240/100=2.4，放不下3個圖，由於space不裁剪，因此向下取整爲2，因此x和y軸都有2張背景圖，且兩端對齊，其他空間空白，如上圖左2。

round的狀況，round這個詞頗有意思，它有四捨五入的意思。round(240/100)=round(2.4)=2，因此就容納2張圖片，圖片尺寸放大，如上圖右2。

若是設定div寬度爲250，round(250/100)=round(2.5)=3，因此就容納3張圖片，圖片被縮小，如上圖右1。

三、background-position

css2中背景只能從左上角定位，css3的background-position增長到四個屬性值，能夠對四個角都進行定位，並且能夠取負值。

background-position取值的關鍵字有：top left center right bottom

按照取值個數舉例來講一下：

a、一個參數

background-position: top;僅給定一個值，那麼第二個值將是"center"。

注意一個問題：給一個值，並不必定是設置background-position-x,要根據參數定。left center right天然是設置x軸，top center bottom是對應y軸。

b、兩個參數

background-position:x% y%|x pos y pos|center center。

第一個設置x軸偏移，第二個設置y軸偏移，沒什麼好說的。

c、三個參數

Note:設置3個或4個參數值時，偏移量前面必須有關鍵字。就是說形如："10px bottom 20px" ，是錯誤的，由於10px前面沒有關鍵字。

MDN上background-position: 0px 0px, center;這樣的寫法顯然是錯誤的。

background-position: right 10px top;設置，水平靠右10px，垂直top。

d、四個參數

background-position:right 10px bottom 10px;設置靠右下角水平垂直10px定位。

2、css3中新增屬性介紹

css3中background新增了3個屬性:background-origin,background-clip和background-size。

一、background-origin

background-origin用來指定背景圖片定位在哪一個盒子中。

我的觀點：background-origin是background-position的特例。都是表示背景圖放哪，background-origin特殊點，決定背景圖定位在哪一個盒子中，至關於快速定位，你能夠先經過background-origin定位到盒子，再經過background-position進行微調。

語法：

background-origin ： border-box | padding-box | content-box;

默認值：padding-box；

設置背景圖片原始起點位置，沒什麼好說的，只是有幾點須要注意：

a、repeat和origin關係

若是背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。這句話是慕課網總結的，我得吐槽一下，背景repeat這個屬性是仍是有效的。請看下面例子。

<style type="text/css">
div{
    color: white;
    width: 100px;
    height: 100px;
    border: 20px  dotted pink;
    padding:50px;
    background-color: yellow;
    background-image: url(img/wl.jpg) ;
    display: inline-block;
    vertical-align: top;
}
.origin-content{
    background-origin: content-box;
}
.nopeat{
    background-repeat: no-repeat;
}
</style>
<body>
<div></div>
<div class="origin-content nopeat">origin-content nopeat</div>
<div class="origin-content">origin-content</div>
</body>

分析：可見設置repeat時，先經過origin肯定圖片位置，而後向各個方向朝外平鋪，延伸到border區域。在上面background-repeat時就說了：對於背景圖的平鋪，默認狀況，背景圖在x軸和y軸平鋪，儘管起始於padding-box左上角，可是其各個方向朝外平鋪，延伸到border區域。如今origin只是改變了起始位置，

b、fixed和origin關係

若是background-attachment屬性設置爲"fixed"，background-origin將不起做用。

這個很好理解，由於fixed是相對於視口定位的，一個網頁只有一個視口，若是不理解請看《background-attachment屬性》

二、background-clip

背景區域中背景圖片裁剪的位置。

語法：

background-clip ： border-box | padding-box | content-box | no-clip;

默認值：border-box。

若是理解比較抽象，就關注背景顏色，若是background-clip爲content，背景顏色就不會填充padding和border，由於被裁剪掉了。

<style type="text/css">
p {
   border: 10px navy;
   border-style: dotted double;
   margin: 1em;
   padding: 1em;
   background: #F8D575;

 }
 .bb{
  background-clip: border-box;
 }
 .pb{
  background-clip: padding-box;
 }
 .cb{
  background-clip: content-box;
 }
</style>
<body>
<p class="bb">內容background-clip: border-box;</p>
<p class="pb">內容background-clip: padding-box;</p>
<p class="cb">內容background-clip: content-box;</p>
</body>

View Code

三、background-size

css3新增了background-size容許背景圖被拉伸或者壓扁。在響應式設計裏頗有用。

語法：

background-size: auto | <長度值> | <百分比> | cover | contain

參數：

auto:默認值，不改變背景圖片的原始高度和寬度。

<長度值>：成對出現如200px 50px,將背景圖片寬高依次設置爲前面兩個值；當設置一個值時，將其做爲圖片寬度值，高度被設置爲"auto"，且高度等比縮放。

<百分比>：0%~100%之間的任意值，將背景圖片寬高依次設置爲所在元素寬高【並非圖片默認的寬高】乘之前面百分比得出的數值，一個值時，高度等比縮放。

常常用下面代碼在網站中適應全屏幕背景。

body {
    background: url(image.jpg) no-repeat;
    background-size: 100%;
}

cover:覆蓋，將背景圖片等比縮放以填滿整個容器。相似桌面背景中的平鋪。就是把圖片按比例擴展至足夠大，以使背景鋪滿盒子，若是圖片和容器的長寬比不一樣的話，背景圖像的某些部分可能沒法顯示出來。

contain:容納，即將背景圖片等比縮放至容器的寬或高被填充滿。有可能把圖像放大後，依然鋪不滿盒子。

網上不少cover和contain的例子，可是講的很不明白。下面我舉個例子說明一下。

對比cover和contain舉例：

<style>
div{
  width: 150px;
  height: 60px;
  border: 1px solid pink;
  display: inline-block;
  background-image: url(img/bg.png);
  background-color: green;
  vertical-align: top;
  background-repeat: no-repeat;
}
.cover{
  background-size: cover;
}
.contain{
  background-size: contain;
}
</style>
<body>
<img src="img/bg.png">原始圖片尺寸：100px*50px
<br/><br/><div class="cover"></div>div尺寸：150px*60px;
            <div style="width:150px;height:75px;background-size:cover;"></div>cover對應圖片尺寸：150px*75px;
<br/><br/><div class="contain"></div>div尺寸：150px*60px;
            <div style="width:120px;height:60px;background-size:contain;"></div>contain對應圖片尺寸：120px*60px;
<h3>背景圖片大小計算方法：</h3>
<h4>即cover和contain等比縮放比例的計算：</h4>
<p>150/100=1.5;60/50=1.2</p>
<p>cover取大，放大1.5倍。width:150px;height:75px;</p>
<p>contain取小，放大1.2倍。width:120px;height:60px;</p>
</body>