css - Bootstrap - img 作为容器流体背景

Question

我想要一个页面标题，其中包含问候语并具有图像作为背景。如何实现图像是容器流体的背景，但它随文本缩放，以便完全响应。

这就是标题的内容。

<!-- Introduction -->    
    <div class="container-fluid mr-auto">
        <h1>Willkommen</h1>
        <p>
            Willkommen auf der Seite des LuGy-Bienen-Livestreams! 
            Hier können Sie nun unsere kleinen Helferlein zu jeder Tageszeit beobachten! 
            Wir, das P-Seminar „Bienen erleben“, wünschen Ihnen viel Spaß beim Eintauchen in die Bienenwelt!
        </p> 
    </div> 
<!-- /Introduction -->

图像在任何情况下都应为全 Angular 。

感谢您的帮助...

Answer 1

如果您想以“引导方式”执行此操作，您可以尝试以下代码。

这就是正在工作的 jumbotron 和 jumbotron-fluid。请注意，在本例中，我使用 container 类来确保 4K 宽屏幕上的人们不会生你的气。 :-)

此外，请阅读下面代码中的注释，并通过取消注释/添加其中一些部分进行实验，看看它对您有何帮助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    #hero {
        background: url("https://picsum.photos/1280/710") no-repeat center;
        background-size: cover;
    }
</style>

<div class="jumbotron jumbotron-fluid" id="hero">
<!-- you can also add something like style="min-height: 70vh;" to the div above -->
    <div class="container">
<!--
        Uncomment this to see the effect of native Bootstrap classes:
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-->
        <div class="row">
            <div class="col">
                <h1>Willkommen</h1>
                <p>
                    Willkommen auf der Seite des LuGy-Bienen-Livestreams! 
                    Hier können Sie nun unsere kleinen Helferlein zu jeder Tageszeit beobachten! 
                    Wir, das P-Seminar „Bienen erleben“, wünschen Ihnen viel Spaß beim Eintauchen in die Bienenwelt!
                </p> 
            </div>
        </div>
    </div>
</div>