我一直在尝试使用我的文字在div滚动中制作背景图像。 现在,当我向下滚动时,图像只停留在页面顶部。 下面是我在实际页面上写的内容,后面是我的样式表上的两个类。后两者只是一个我一直在玩弄的占位符。在过去的几个小时内通过了大概100个链接,仍然无法深究这一点。
<div class="main">
<div class="gunbg"></div>
</div>
.main
{
position: fixed;
left:178px; top:155px; right:0; bottom:0;
overflow: scroll;
border: 3px solid #73AD21;
transform: scale(1.0);
transform-origin: 10% 10%;
}
.main .bgmain
{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('images/gunbg.jpg') no-repeat center center;
opacity: .4;
width: 100%;
height: 100%;
}
答案 0 :(得分:0)
以下是修复css的方法
HTML
<div class="main">
<div class="gunbg">
<h1>
Hello World
</h1>
</div>
</div>
CSS
.main {
background: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_559332799_Tree_Rings.jpg');
background-attachment: fixed;
background-size: cover;
height: 130vh;
}
.gunbg{
text-align:center;
color:#fff;
padding-top:200px;
}