Question

我设法让图像向上滚动，但是当向下滚动图像时，我丢失了我的标题（我在身体标记中作为背景放置）。它变成了白色背景。

图像也会在标题图像上方滚动。我以一种我认为允许标题始终位于顶部的方式设置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>标记，然后您可以将背景图像设置为该标题并将其设置为position:fixed;

您的标头需要是一个单独的元素，因为所有内容都嵌套在body中。您的背景图片将滚动显示您的内容，除非您将其背景位置设置为固定，但即使这样，它也不会位于您的内容之上，因为它是背景图像。 z-index不适用于背景图像。

通过在<header>之上添加.bgimg-paisley元素来更新您的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

我放置了一个类图像并将其设置为溢出：向左和向右滚动和边距自动使其居中。我还将您的顶部图像设置为固定。

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>

图像向上滚动与固定的背景

2 个答案: