Question

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

我有一个想要固定的图像 - 向下滚动页面，我想在进入第二个具有不同颜色背景的div时平滑地改变颜色。我已经对div进行了排序，图像放置得很完美，而且我想要的效果非常出色 - 我现在唯一的问题是，由于使用百分比等原因，我不能将这两个图像对齐，因为使用百分比等。

我在这里有一个工作示例你肯定需要看一下 - jsFiddle - 您可能需要稍微调整页面大小以了解我遇到的特定对齐问题。顶部的“Hello”位于偏离中心的设定位置，我希望通过第二个“Hello”实现。我无法让它发生！有什么建议？我一直在寻找可能的jQuery解决方案但到目前为止没有运气。

感谢大家提供任何答案。干杯。

Answer 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/

Answer 2

好。似乎我找到了一个解决方案，但我不认为它是理想的。虽然效果很好！在Chad说尝试background-position: left center;之后，我意识到我是否只是将图像设为 background-position: center; 并使图像在一侧有一堆空白，在photoshop上有足够的空间我设法将两者排成一行。现在效果很好，在我的所有浏览器中排列完美。

这是一个例子 - jsFiddle（虽然你看不到它的大部分变化，因为它是必须改变的图像本身。）

感谢回复人员。

对齐固定背景图像的问题

2 个答案: