CSS3 設定多個背景圖片

admin發表於2018-05-26
CSSS3

本章節介紹一下利用CSS3為同一個元素設定不同的背景圖片，之前實現此效果相對繁瑣。

首先看一下CSS2有哪些屬性可以設定元素背景。

列表如下:

[CSS] 純文字檢視 複製程式碼
background-color: color值 || RGBA值;
background-image: url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: <length> || <per>

為了更為清晰，將background的各個屬性單獨寫出來，當然也可以合併。

CSS3新增或者增強了若干屬性，列表如下:

[CSS] 純文字檢視 複製程式碼
background-image: url();
background-position: <length> || <per>;
background-size: <length> || <per>;
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;
background-color: color值 || RGBA值;

上面屬性有的是CSS3新增，有的在CSS3中得到增強，最後面的例項程式碼會有體現。

語法結構如下:

[CSS] 純文字檢視 複製程式碼
background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color

特別說明:

如果採用合併的寫法，background-size屬性需要跟在background-position屬性的後面，之間要用斜槓"/"分隔，考慮到當前瀏覽器存在相容問題，推薦分開寫，因為可能需要在屬性前面新增瀏覽器廠商字首，例如:

[CSS] 純文字檢視 複製程式碼
-moz-background-origin

如何設定多背景圖片:

上面介紹了background有哪些屬性，下面就介紹一下如何給一個元素設定多個背景圖片。

CSS3中，不需使用任何其他特別的屬性，就可以給同一元素設定除background-color以外其他多個背景屬性，也就是說除了背景色以外，其他任何背景屬性都可以給同一元素設定多個。

語法結構如下:

[CSS] 純文字檢視 複製程式碼
background ：[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*

上面是合成的寫法，當然也可以分開，當前推薦分開寫:

[CSS] 純文字檢視 複製程式碼
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
backrgound-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;

程式碼例項如下：

a:3:{s:3:\"pic\";s:43:\"portal/201702/02/224708av288rro8f8hkzkv.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果有上面圖片類似的要求（將四個圖片分別放置於元素的四角），使用CSS2，可以使用如下程式碼:

[HTML] 純文字檢視 複製程式碼
<div class="box">
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="content">螞蟻部落</div>
  <div class="bottom-left"></div>
  <div class="bottom-right"></div>
</div>

上面只演示HTML結構，將四角的小圖作為四個div的背景圖，然後使用定位將其放置於響應位置，比較繁瑣；使用CSS3多背景圖方式則更為簡單，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.bg{
  width:215px;
  height:165px;
  background-attachment:scroll,scroll,scroll,scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:url(mytest/demo/top-left.jpg),
  url(mytest/demo/top-right.jpg),
  url(mytest/demo/bottom-left.jpg),
  url(mytest/demo/bottom-right.jpg);
  background-origin: border, border, border, border;
  background-origin:border-box, border-box, border-box, border-box;
  background-position:left top, right top, left bottom, right bottom;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:auto auto, auto auto, auto auto, auto auto;
   
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

以上程式碼實現了我們的要求，只需要一個標籤就可以實現多個背景圖效果。

相關文章