Question

我有以下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所做的）也是静态的，所以如果你向下滚动文本就可以滚动它。

Answer 1

只需添加background-attachment: fixed;即可。这样的事情应该有效。

＆＃13;

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

＆＃13;

<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>

＆＃13;

静态居中的背景图像

1 个答案: