我有以下CSS

.bg
{
    height:          100%;
    background:      url("${image}") no-repeat center;
    background-size: cover;
    margin-top:      -7px;
}


并这样使用

<div class = "bg"></div>


我想要的是这样的静态图像,但是如果向下滚动(图像仍然存在),则页面文字开始出现。我应该如何更改CSS?

我的页面文字是

<div class = "container">
    <div class = "jumbotron well">
        <div class = "page-header">
            <h3>Header
                <small>subheader</small>
            </h3>
        </div>
        <p>Hello world</p>
    </div>
</div>


编辑:
进一步澄清。我想要的是全屏居中图像(css这样做),该图像也是静态的,因此,如果向下滚动,则可以在其上滚动文本。

最佳答案

只需添加background-attachment: fixed;
这样的事情应该起作用。



body {
  background-image: url('https://images.alphacoders.com/633/633643.jpg');
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

<div class="fixed-bg"></div>
Just text<br> Just text<br> Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just
text
<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just
text
<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>Just text<br>

10-05 20:55
查看更多