製作1張圖片在兩張其他圖片之間？

在我的第一頁site我有兩個圖像放在一起，所以它看起來像日落。我想讓我的標誌在它們之間下來，就好像它是太陽一樣，但我不能讓這種事發生。該標誌是目前在現場的第二頁下面有我的HTML：製作1張圖片在兩張其他圖片之間？

<div id="intro"> 
    <div id="introbaggrundbagved"></div> 
    <a name="section1" class="section">SECTION 1</a> 
    <div id="logo"> 
    </div> 
</div> <!--#intro-->

而CSS：

#intro{ 
    background: url('images/introforan.png') no-repeat center; 
    height: 900px; 
    margin: 0; 
    position: relative; 
    z-index: 3; 
} 

#introbaggrundbagved{ 
    background: url('images/introbagved.png') no-repeat center; 
    height: 900px; 
    width: 1440; 
    margin:0; 
    position: relative; 
} 

#logo{ 
    background: transparent url('images/logo.png') no-repeat center; 
    width: 600px; 
    height: 600px; 
    position: relative; 
    margin-left: 420px; 
    margin-top: 100px; 
    z-index: 2; 
}

來源

2012-12-18 McKeene

你需要採取#logo格了它的父元素#intro，並給予它是一個比兩個兄弟姐妹都大的z-索引 - 然後將所有header元素都包含到#intro-wrapper格中。此外，我會position#logo元素使用position: absolute，而不是relative，這會給你更細粒度的控制它的位置，而不會影響周圍元素的文檔流。

此外，看起來您有更新#logo的top屬性的功能parallaxScroll，這會阻止元素放置在您的兩個圖像之間。

function parallaxScroll(){ 
     var scrolledY = $(window).scrollTop(); 
     $('#logo').css('top','+'+((scrolledY*.376))+'px'); 
     .... 
     }

來源

2012-12-18 00:56:12

我現在這樣做了，我把標識放到了正確的位置。但是我需要在首頁中看到的2張圖片之間放置徽標。草地和天空是2個不同的圖像。 #intro中的圖像應放在前面，#logo中的圖像放在中間，#introbaggrundbagved中的圖像放在後面。 Thx幫助我:) – McKeene

好吧，這個想法是當人們向下滾動頁面時，讓它像2張圖片之間的太陽一樣向下。 – McKeene

給'introbaggrundbagved'一個z-index 1，確保'introbaggrundbagved'有一個'height'屬性集。 –

製作1張圖片在兩張其他圖片之間？

回答

相關問題