0

不完全确定如何在这里首先表达这个问题，但我会试一试。

我有一个图像，我想固定向下滚动页面，当它进入具有不同颜色背景的第二个 div 时，我想平滑地更改颜色。我已经对 div 进行了排序，图像放置得很好，我想要的效果也很好——我现在唯一的问题是，由于使用百分比等，我无法在我的一生中对齐这两个图像。

我在这里有一个工作示例，您当然需要查看 - jsFiddle - 您可能需要稍微调整页面大小以了解我遇到的特定对齐问题。顶部的“Hello”偏离中心位置，我想用第二个“Hello”来实现。我就是不能让它发生！有什么建议么？我一直在寻找可能的 jQuery 解决方案，但到目前为止还没有运气。

非常感谢您提供任何答案。干杯。

4

2 回答 2

1

现场演示链接在这里 http://jsfiddle.net/EtJBn/107/

嗨，现在你可以轻松做到这一点

只需像这样定义一些属性

CSS

html, body {
    height:100%;
}

#top{
    height:100%;
    width:100%;
}

#bottom{

    height:100%;
    width:100%;
    background-color:black;
    z-index:200;
}

#topsq {
    position:fixed;
    height:175px;
    background:url("http://mattwaymouth.com/images/hello_small.png") no-repeat center top;
    left:0;
    top:50px;
    right:0;
    z-index:1;


}    

#second {
    position:relative;
    background: url("http://mattwaymouth.com/images/hello_small_green.png")  no-repeat center 50px fixed;         
    left:0;
    top:0;
    right:0;
    z-index: 200;
        height:300px;
}

HTML

<div id="top">
    <div id="topsq"></div>
</div>

<div id="bottom">
    <div id="second"></div>
</div>

现场演示 http://jsfiddle.net/EtJBn/107/

于 2012-06-08T04:35:14.137 回答
0

好。似乎我找到了一个解决方案，虽然我不会称之为理想。不过效果很好！在乍得说要尝试之后，background-position: left center;我意识到如果我只是将图像设置为background-position: center;并让图像在一侧有一堆空白空间，在 Photoshop 上进行足够的操作，我可以设法将两者对齐。现在效果很好，在我所有的浏览器中都完美排列。

这是示例 - jsFiddle（尽管您看不到它有太多变化，因为必须更改图像本身。）

谢谢大家的回复。

于 2012-06-08T02:41:11.383 回答