定位頁面的背景圖像

我有兩個圖像，一個圖像的尺寸爲1800 X 1140，另一個尺寸爲1 X 1140的淡入淡出圖像。我需要合併這兩個圖像，使得第一個圖像應該爲一半，而第二個圖像應該像一個漸變第一個圖像漸變。我實施divs如下。定位頁面的背景圖像

<div style="background:url('first-img.png') no-repeat fixed top center transparent;"> 
    <div style-"background:url('second-img.png') repeat fixed bottom center transparent;"> 

    </div> 
</div>

來源

2012-04-26 Harsha vardhan

您所使用的方法是正確的翻轉BG圖像的垂直和水平位置..正確的順序是水平的第一和第二垂直的代碼將是這樣

<div style="background:url('first-img.png') no-repeat fixed center top transparent;"> 
    <div style-"background:url('second-img.png') repeat fixed center top transparent;"> 

    </div> 
</div>

，並添加確切的寬度和高度div的

來源

2012-04-26 06:49:54

嘿，現在你可以相對和絕對像這樣

Define your parent postion relative and child define absolute

定義位置

的CSS

.parent{ 
position:relative; 
    width:500px; 
    height:200px; 
    border:solid 1px green; 
    background:url('first-img.png') no-repeat fixed top center transparent; 
} 




.child{ 
position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    border:solid 2px red; 
    background:url('second-img.png') repeat fixed bottom center transparent; 
}

HTML

<div class="parent"> 
     <div class="child"> 
    ------- 
     </div> 
    </div>

更改寬度和高度根據你的設計...

來源

2012-04-26 08:07:19

定位頁面的背景圖像

回答

相關問題