使用CSS3的多個背景圖像

我想了解如何使用CSS3定位多個背景圖像。我做得不好。你如何獲得一張圖片來定位頁面頂部，頁面中間和頁面底部？爲了說明的目的，我們只需使用100px x 100px的塊。我只能讓他們在頂端位置。使用CSS3的多個背景圖像

CSS

body { 
background-image: 
url(../images/red.png), 
url(../images/blue.png), 
url(../images/yellow.png); 
background-position: left top, center top, right top; 
background-repeat: no-repeat; 
}

我希望他們左上，左中，然後離開底部。

謝謝

來源

2012-03-11 Ibanez

您需要結合您的標籤。

body { 
    background-image: 
     url(../images/red.png) left top no-repeat, 
     url(../images/blue.png) center top no-repeat,, 
     url(../images/yellow.png) right top no-repeat, 
}

編輯：

<style type="text/css"> 

    background-image: 
    url(../images/red.png), 
    url(../images/yellow.png); 
    background-position: left top, left bottom; 
    background-repeat: no-repeat; 

    #centerIMG { 
     margin-top:-50px; 
     height: 100px; 
     width: 100px; 
     background:url(../images/blue.png) center left no-repeat; 
    } 
    #outer {height: 100%; overflow: hidden; position: relative;} 
    #outer[id] {display: table; position: static;} 

    #middle {position: absolute; top: 50%;} /* for explorer only*/ 
    #middle[id] {display: table-cell; vertical-align: middle; width: 100%;} 

    #inner {position: relative; top: -50%} /* for explorer only */ 
</style> 
    <div id="outer"> 
     <div id="middle"> 
      <div id="inner"> 
       <div id="centerIMG"></div> 
      </div> 
     </div> 
    </div>

編輯：

<style type="text/css"> 
    body 
    { 
     background: 
      url("red.png") top repeat-x, 
      url("blue.png") bottom repeat-x, 
      url("orange.png") center repeat; 

      background-size: 200px, 100px; 
    } 
</style>

來源

2012-03-11 00:55:01 Bradmage

我不希望所有三是沿着頂部。我希望他們左上，左中，然後左下。 – Ibanez 2012-03-11 00:56:42

噢對不起，我錯過了，因爲你在三項中都名列前茅。「center right no-repeat」使它居中，但使用圖像的基線。我將編輯我的帖子。 – Bradmage 2012-03-11 01:15:44

忘了提及，你只需要修改「#centerIMG」。代碼中心div，爲了獲得圖像居中，您只需將邊距設置爲「減半（圖像高度的一半）」，就像我舉例說明的那樣。 – Bradmage 2012-03-11 01:26:24

使用CSS3的多個背景圖像

回答

相關問題