html - 标题上的全屏图像背景

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(例如 Nav、article)不在类 .intro 的 div 下方。但是，它在 div 内部(类介绍)。

Answer 1

我有一个解决方案给你。

问题1)
我所做的是添加一个 <img>在第一个 div 下面(所以是带有类介绍的 div)。 img 的类别为 bg .

比添加这个CSS:

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

here你有一个工作 fiddle 。我加了很多<br>向您展示它有效的标签。

也可以尝试设置背景图片height:100%和 width:auto; .如果您这样做，图像将不会在某些屏幕上挤在一起。

问题2)
我给每张幻灯片上课 slide1 .我还添加到所有幻灯片类 position:relative; . Taka看看这个fiddle .

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