Question

我注意到我的网站存在一个有趣的问题。我有一个具有静态背景图像的部分，当您滚动时，它的顶部会有一个引号和按钮（最终将链接到商店）。据我所知，这是在过去工作，但昨天我注意到几秒后背景图像消失了，取而代之的只是灰色背景。在永久替换为灰色背景之前，图像会闪烁一点。

这是我的HTML：

<section class="bar background-image-fixed-2 no-mb color-white text-center">
    <div class="dark-mask"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="icon icon-lg"><i class="fa fa-leaf"></i>
                </div>
                <h3><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
                <p class="text-center">
                    <a href="#" class="btn btn-template-transparent-black btn-lg">Get Some</a>
                </p>
            </div>

        </div>
    </div>
</section>

这是我的CSS：

.bar.background-image-fixed-2 {
  background-image: url('../img/fixed-background-2.jpg'); 
  background-position: center center;
  background-repeat no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

图片网址正确，因为它最初加载了几秒钟。最初，这是写的简短，但我看到的一些建议建议做CSS的长形式。我把它分开了，但这似乎没什么区别。

实际外观（不正确）：

预期的外观（在我自动更改之前我会得到几秒钟）：

编辑：

Here is a fiddle（虽然它缺少一些javascript所以看起来很有趣）。

Answer 1

请检查您的网址是否正确加载：

.bar.background-image-fixed-2 {
  background-image: url('https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=1650&q=80'); 
  background-position: center center;
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<section class="bar background-image-fixed-2 no-mb color-white text-center">
    <div class="dark-mask"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="icon icon-lg"><i class="fa fa-leaf"></i>
                </div>
                <h3 class="text-white"><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
                <p class="text-center">
                    <a href="#" class="btn btn-template-transparent-black btn-lg">Get Some</a>
                </p>
            </div>

        </div>
    </div>
</section>

为什么我的背景图像消失/闪烁（引导程序）？

1 个答案: