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 -->

在任何情况下，图像都应该是全宽的。

感谢您的帮助...

Answer 1

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

这是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>

Answer 2

如果你想要你的图像应该是全宽的，你必须使用background-size:cover css，因为它会在不拉伸图像的情况下尽可能地缩放图像。

^{注意：如果图像的比例与元素不同，则会垂直或水平裁剪，以便不会留下任何空白区域。}

.bg-class {
  background-image: url(http://via.placeholder.com/350x150);
  background-size: cover;
  background-position: center center;
  padding: 20px;
}

<div class="container-fluid mr-auto bg-class">
  <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>

参考链接

Bootstrap - img作为容器流体背景

2 个答案: