制作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张图片在两张其他图片之间？

回答

相关问题