图像在固定背景下向上滚动

Question

我设法让图像向上滚动，但是当向下滚动图像时，我丢失了 header（我已将其作为背景放在 body 标签中）。它变成了白色背景。

图像似乎也在 header 图像上方滚动。我以一种我认为可以让 header 始终位于顶部的方式设置 z-index。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<html>
<HEAD>
<style type="text/css">

body { background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Background-2013.gif');
        background-repeat:no-repeat;
    z-index:3;
    top:0px;
    left:0px;
}


.bgimg-paisley {
    background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/black-paisley-background.jpg');
    background-repeat:no-repeat;
    position:fixed;
    top:97px;
    left:0px;
    min-width:100%;
    min-height:100%;
    z-index:1;
}

.imgwedding {
    position:absolute;
    top:110px;
    left:200px;
    z-index:2;
    width:700px;
}

-->
</style>

</head>
<body>


<div class="bgimg-paisley"></div>

    <div class="imgwedding">
    <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
    <div style="height:80px;"></div>

    <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
    <div style="height:80px;"></div>
    <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
    <div style="height:80px;"></div>
    <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
    <div style="height:80px;"></div>
    <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
    </div>

</body>
</html>

Answer 1

你需要让你的 header 成为一个单独的元素，比如 <header> 标签，然后你可以将 background-image 设置为那个并设置它 position:fixed;

您的 header 需要是一个单独的元素，因为所有内容都嵌套在 body 中。你的 background-image 将随着你的内容滚动，除非你将它的 background-position 设置为固定，但即使那样它也不会在你的内容之上，因为它是 background-image。 z-index 不适用于 background-images.

通过在 .bgimg-paisley 上方添加 <header> 元素来更新您的 HTML，如下所示：

<header></header>
<div class="bgimg-paisley"></div>
...

接下来更新 body 的 css 样式，将 body 选择器替换为 header，然后添加 position:fixed; 样式来修复它到顶部并给它一些尺寸，因为它没有内容。像这样：

header { 
    background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Background-2013.gif');
    background-repeat:no-repeat;
    position:fixed;
    z-index:3;
    top:0px;
    left:0px;
    width:100%;
    height:97px;
}

请参阅此 Fiddle 进行演示

Answer 2

我放了一张 class 图像并将其设置为 overflow:scroll 和 margin-left 和 right 以自动将其居中。我也把你的置顶图片设置为固定的。

body {
  background-image: url('http://lib.store.yahoo.net/lib/oberers-flowers/Background-2013.gif');
  background-repeat: no-repeat;
  z-index: 3;
  top: 0px;
  left: 0px;
}
.images {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  height: 800px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.bgimg-paisley {
  background-image: url('http://lib.store.yahoo.net/lib/oberers-flowers/black-paisley-background.jpg');
  background-repeat: no-repeat;
  position: fixed;
  top: 97px;
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}
.imgwedding {
  position: fixed;
  top: 110px;
  left: 200px;
  z-index: 2;
  width: 700px;
}

<body>


  <div class="bgimg-paisley">

    <div id="imgwedding">


      <div class="images">
        <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">

        <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
        <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">

        <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">

        <img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/bride-and-bridesmaid.jpg">
      </div>
    </div>


</body>

图像在固定背景下向上滚动

Images scrolling up with fixed background

css

background

z-index