HTML

Question

有人会帮忙吗？我在stackoverflow.com和谷歌搜索了一周，但我找不到解决问题的方法。你可以猜到我不是CSS的专家，我承认我可能做错了，这就是我愿意改变html文件和css文件的原因。

我有一个流畅的布局，固定（绝对定位）页眉，页脚和侧边栏。内容位于带有垂直滚动条的灵活div中。我想将背景图像固定并居中于包含可滚动内容的div和主内容末尾的静态div。不幸的是，无论我使用什么div作为背景图像，背景图像都以视口为中心而不是包含框。

以下是代码：

HTML

<body>
  <div class="container">
    <div class="sus">
<!--Header-->
    </div>
    <div class="totul">
      <div class="coloana">
            <!--Sidebar-->
      </div> 
      <div class="dreapta">     <!--Here I want the fixed centered background image-->
      <div class="continut">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />
        asdfsad ff asdf asdfasd
<p>Lorem ipsum dolor sit amet, ullamco laboris nisi duis aute irure dolor. Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation lorem ipsum dolor sit amet. Sed do eiusmod tempor incididunt ullamco laboris nisi consectetur adipisicing elit. Sunt in culpa duis aute irure dolor quis nostrud exercitation. Eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore ut labore et dolore magna aliqua. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur. Mollit anim id est laborum. Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. Qui officia deserunt quis nostrud exercitation sed do eiusmod tempor incididunt. Ut enim ad minim veniam, consectetur adipisicing elit, excepteur sint occaecat. Cupidatat non proident, lorem ipsum dolor sit amet, mollit anim id est laborum. Sunt in culpa in reprehenderit in voluptate duis aute irure dolor. Ullamco laboris nisi eu fugiat nulla pariatur. Ut enim ad minim veniam, velit esse cillum dolore excepteur sint occaecat. Duis aute irure dolor ut aliquip ex ea commodo consequat. Qui officia deserunt. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Ullamco laboris nisi excepteur sint occaecat ut labore et dolore magna aliqua. Cupidatat non proident, mollit anim id est laborum. Velit esse cillum dolore lorem ipsum dolor sit amet, ut enim ad minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Duis aute irure dolor consectetur adipisicing elit. Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt velit esse cillum dolore in reprehenderit in voluptate. Ut labore et dolore magna aliqua. Excepteur sint occaecat eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt mollit anim id est laborum. Ut enim ad minim veniam, velit esse cillum dolore lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Qui officia deserunt ut labore et dolore magna aliqua. Ullamco laboris nisi. Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation lorem ipsum dolor sit amet, eu fugiat nulla pariatur. Consectetur adipisicing elit, in reprehenderit in voluptate cupidatat non proident. Duis aute irure dolor ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt qui officia deserunt ut enim ad minim veniam. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Velit esse cillum dolore excepteur sint occaecat. Ullamco laboris nisi ut aliquip ex ea commodo consequat. Quis nostrud exercitation in reprehenderit in voluptate ut enim ad minim veniam. Mollit anim id est laborum. Lorem ipsum dolor sit amet, sunt in culpa cupidatat non proident. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi consectetur adipisicing elit, lorem ipsum dolor sit amet. Quis nostrud exercitation ut enim ad minim veniam, in reprehenderit in voluptate. Duis aute irure dolor.</p>
    </div> 
<!--Next block appear only when all the content above was scrolled down--> 
      <div class="parteneri">End of the main content</div> 
      </div> 
    </div> 
  <div class="subsol">Footer</div>
</div>
</body>

CSS

@charset "utf-8";
body {
background-color:#CCC;
margin:0px;
padding:0px;
color: #006;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 100%;
background-attachment: fixed;
background-image: url(imagini/fundal.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.container {
min-width:800px;
max-width: 1600px;
min-height: 300px;
text-align: justify;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
.sus {
background-color:#CCC;
background-attachment: fixed;
background-image: url(mici/antet-fundal.jpg);
background-repeat: no-repeat;
background-position: center top;
overflow: hidden;
text-align: center;
margin: 0px;
padding: 0px;
height: 200px;
width: 100%;
position: absolute;
top: 0px;
}
.totul {
overflow: hidden;
padding: 0px;
width: 100%;
margin: 0px;
position: absolute;
top: 200px;
bottom: 10px;
}
.coloana {
background-image: url(col/umplere.png);
background-repeat: repeat-y;
background-position: center top;
text-align: center;
overflow: hidden;
height: 100%;
width: 250px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
}
.dreapta {
margin: 0px;
overflow:auto;
overflow-x:hidden;
height: 100%;
padding: 0px;
text-align: center;
position: absolute;
right: 1px;
left: 250px;
vertical-align: middle;
border-right: 1px solid #999;
background-color: #09F;
background-attachment: fixed;
background-image: url(imagini/sigla_map.jpg);
background-repeat: no-repeat;
background-position: center center;
z-index: 0;
}
.continut {
padding: 15px;
margin: auto;
width: 97%;
text-align: justify;
z-index: 10;
}
.parteneri {
background-color: #999;
height: 70px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: left;
}
.subsol {
width:100%;
height:10px;
background-color:#CC8C60;
overflow: hidden;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
color: #F1DFD1;
}

在我解决这个谜团之前，我无法入睡。谢谢你的帮助。

Answer 1

w3school's definition of background-attachment

“background-attachment：fixed”表示您的背景图片根本不会滚动。它将位于相对于视口的位置。即使它是页面上一个小元素的背景图像，它也会粘在视口上。

您希望自己的背景图片贴在“.sus”上，然后我建议您只删除背景附件。

您的背景图片是否滚动滚动条？然后我的建议是将滚动元素包含在包含div“.sus_wrap”中，然后将背景应用于此。在这种情况下，请将“.sus”保持透明。

但是，背景附件不是你想要的。

Answer 2

为了使背景图像在可滚动内容区域中居中，请使内容区域的背景透明。然后在内容区域后面堆叠一个带有position:absolute 的div ，并确保它与内容可见视口的大小和位置相同。然后在背景div上设置background: center no-repeat url('your/url')。

~~Here is an example~~ [该示例中使用的图像具有误导性，因为它底部包含一个白条，因此看起来比实际上短是。这使它看起来不是垂直居中，实际上，它是]

Here is a better example演示了这种技术。

固定背景图像以绝对定位框为中心

HTML

CSS

2 个答案: