标题上的全屏图像背景

Question

我想用 css 和 Bootstrap 做网站布局。

我已经尝试过 Foundataion FW，我得到了我想要的。但是，当我切换到 Bootstrap 并使用与以前相同的代码时。结果不一样。

我想像这个网站http://ottavio.kleis.agency/index.html一样以图像为背景全屏布局标题。

这是我的自定义 CSS：

.intro{
background-image: url(../img/asset/new_bg.jpg);
position: absolute;
height: 100%;
width: 100%;
background-size: cover;

}

HTML：

    <div class="row intro">
        <div class="col-xs-12">
            <h1 class="h2-cover">Ingin belajar Qur'an <strong>gratis?</strong></h1>
            <p class="line-cover">
                Kami akan berikan pelatihan baca Qur'an gratis sepanjang yang Anda mau.
            </p>
            <a href="#" class="button round alert">Mau!</a>
            <a href="#" class="button round morelighter">Benarkah?</a>
        </div>
    </div>

问题是：

1. 图片未全屏
2. 下一个 div（例如导航、文章）不在 .intro 类的 div 下方。但是，它在 div 里面（类介绍）。

Answer 1

我有一个解决方案。

问题 1)
我所做的是我在第一个 div 下方添加了一个<img>（所以是带有类介绍的 div）。 img 有一个bg 的类。

比添加这个css：

.bg{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
}

here 你有一个工作小提琴。我添加了很多<br> 标签来向你展示它的工作原理。

您也可以尝试设置背景图片height:100%和width:auto;。如果你这样做，图像在某些屏幕上就不会那么拥挤了。

问题 2)
我给每张幻灯片上了一堂课slide1。我还添加了所有幻灯片类position:relative;。塔卡看看这个fiddle。

我希望您的问题现在得到解答。如果您有其他问题，请随时提出。