Bootstrap - 全屏幕标题图片，后面是背景图片

问题描述：

Bootstrap新功能。我在设置我的背景图片时遇到了问题，请遵循标题图片。Bootstrap - 全屏幕标题图片，后面是背景图片

标题部分有它自己的全屏幕背景，然后我想跟着一个平铺的背景图像。

我尝试：

<div class="header">...</div> 

<div class="main-body"> 
    <div class="container">...</div> 
    <div class="container">...</div> 
    ... 
</div> 

<div class="footer">...</div>

具有以下样式表：

.main-body { 
    text-align: center; 
    background: url(../img/setttings-bg-black.jpg) no-repeat center center; 
    background-size: 1024; 
    background-color: #000000; 
} 

.header { 
    text-align: center; 
    color: #000000; 
    background: url(../img/promo-bg.jpg) no-repeat center center; 
    background-size: cover; 
}

的问题是，主体背景的顶部由头部本体的底部部分隐藏。

我在做什么错？

不知道图像的尺寸可能很难诊断问题。您可以通过编辑您的问题并使用包含图像的片段功能（快捷键：Ctrl + M）来设置交互式示例吗？ – Bonk

看看css的位置 –

答

验证此link或link

有你的解决方案。

问题1）我所做的是我在第一个div下面添加了一个<img>（所以div与类的介绍）。 img的分类为bg。

不是添加这个CSS：

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

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

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

问题2） I给每张幻灯片一个类slide1。我还添加到所有幻灯片类别position:relative;。塔卡看着这个小提琴。

我希望你的问题现在已经成熟。如果您有其他问题，请随时询问。

Bootstrap - 全屏幕标题图片，后面是背景图片

相关推荐