CSS - 如何创建超过100％的bg图像，并且窗口内的内容为

我希望你们中的一个人能够提供帮助。我遇到了一个问题，那就是用Google搜索和检查我无法解决的论坛。CSS - 如何创建超过100％的bg图像，并且窗口内的内容为

我想创建一个具有高宽度图像的登录页面，该图像可以扩展到100％宽度，并调整为浏览器窗口+内容的动态高度。所有的内容应该低于浏览器窗口的边界，所以它只是浏览器第一次加载时可以看到的图像，然后向下滚动到位于扩展图像底部的内容。

我的HTML目前是：

<body> 
    <section id="sectionOne"> 
     <div id="sectionOneLanding"></div> 
     <div id="sectionOneContent">CONTENT TO SIT HERE</div> 
    </section> 
</body>

我的CSS是目前：

html, 
body { 
    height:100%; 
    width:100%; 
} 

#sectionOne { 
    height:100%; 
    background-image: url(../images/cliff.jpg); 
    background-size: cover; 
} 

#sectionOneLanding { 
    height:100%; 
    width:100%; 
}

目前，图像作物100％的浏览器高度，当你向下滚动附加内容坐镇在白色的bg上而不是图像的其余部分。我相信这是因为#sectionOne的高度为100％，但是当我将它设置为高于100％时，它会将我的内容进一步推下，但仍然是白色的bg。将背景大小更改为100％也无效。它与使用封面相同。

任何想法？有一个方便的CSS技巧？

道歉，如果这没有明确的意义。问任何你需要的问题，因为它很难描述。

来源

2017-10-18 Eamon Yates

参见[创建为您的网站标题全屏英雄DIV（HTTP：// WWW .web2feel.com/C reating-a-fullscreen-hero-div-for-your-site-header /） – Ahmad

这正是我所期待的。非常感谢。你可以在下面把这个答案放在一个答案中，以便我可以批准它吗？ –

您需要为这种情况使用定位。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#sectionOne { 
 
    position: relative; 
 
    height: 100%; 
 
    background-image: url(../images/cliff.jpg); 
 
    background-size: cover; 
 
    background-color: #99f; 
 
} 
 

 
#sectionOneLanding { 
 
    height:100%; 
 
    width:100%; 
 
}

<section id="sectionOne"> 
 
    <div id="sectionOneLanding"></div> 
 
    <div id="sectionOneContent">CONTENT TO SIT HERE</div> 
 
</section>

你不需要width: 100%。但您需要margin: 0;，因为有默认的边距。我添加了一个背景颜色，以便您可以清楚地看到完全将页面内容留在下一页的背景。

如果您需要将图像和内容放在同一页面中，则需要使用Flex Box。

Flexbox的实例

body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#sectionOne { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 
#sectionOneLanding { 
 
    background-color: #99f; 
 
    flex: 1; 
 
}

<section id="sectionOne"> 
 
    <div id="sectionOneLanding"></div> 
 
    <div id="sectionOneContent">CONTENT TO SIT HERE</div> 
 
</section>

预览

来源

2017-10-18 13:04:05 Soolie

你如何让紫色背后的内容多少？ –

@EamonYates哪个紫色？我使用背景颜色。 – Soolie

非常感谢您回复我 –

CSS - 如何创建超过100％的bg图像，并且窗口内的内容为

回答

相关问题