html - 如何修复 'Hero image with svg on bottom (wave)'

Question

您好，我目前正在处理我网站的主页。这是英雄形象。我想用 svg 图像做一个分区。然而，这让我失望了，也许有人可以用他的知识帮助我。

我目前拥有的代码及其外观

<div class="hero-content">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Slim gas en geld besparen</h1>
            <h5 class="text-center">Met de inventum spaarpomp</h5>
        </div>
        <div class="col-md-4">
            <div class="col-md-12">
                <h3>Hoe werkt een spaarpomp?</h3>
            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-12">
                <h3>Hoeveel kan ik besparen?</h3>
            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-12">
                <h3>Is mijn woning geschikt?</h3>
            </div>
        </div>
    </div>
</div>
<img src="<?php echo TEMPPATH; ?>/images/Golf_heroarea.svg" alt="golf">

这是CSS

.hero-content {
background: linear-gradient(rgba(0, 40, 84, 0.35),rgba(0, 40, 84, 0.35)),url("../images/DSC07218_DNG.jpg");
background-position: center center;
background-size: cover;
color: #FFFFFF !important;
height: 600px;

.hero-content .col-md-4 .col-md-12 {
background: #0083c3;
height: 200px;
padding-right: 45px;
padding-top: 25px;
padding-left: 25px;

这是它现在的样子以及它应该的样子(设计)

Answer 1

看起来你已经破坏了布局，尝试保持标准 Bootstrap grid system .

<div class="hero-content">

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Slim gas en geld besparen</h1>
            <h5 class="text-center">Met de inventum spaarpomp</h5>
        </div>
     </div>
</div>

<div class="container">
  <div class="row">
        <div class="col-md-4">
                <h3>Hoe werkt een spaarpomp?</h3>
        </div>
        <div class="col-md-4">
                <h3>Hoeveel kan ik besparen?</h3>
        </div>
        <div class="col-md-4">
                <h3>Is mijn woning geschikt?</h3>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
        <img src="<?php echo TEMPPATH; ?>/images/Golf_heroarea.svg" alt="golf">
        </div>
     </div>
</div>
</div>