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

您可以将.hero-content设置为position: relative;，并将“ wave”设置为绝对定位的元素。看下面的例子：

.hero-content {
  position: relative;
  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;
  overflow: hidden;
}

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

.hero-img {
  position: absolute;
  bottom: -110px;
  left: 0;
  width: 100%;
  height: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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 class="hero-img" src="https://www.condair.ba/assets/img/home-hero-wave.png" alt="golf">
</div>

Answer 2

似乎您已经破坏了布局，请尝试保留标准的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>

Answer 3

您可以使用此代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }        
        .hero-content {
            background: linear-gradient(rgba(0, 40, 84, 0.35), rgba(0, 40, 84, 0.35)), url(https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/photo-1501621965065-c6e1cf6b53e2.jpg);
            background-position: center center;
            background-size: cover;
            color: #FFFFFF !important;
            height: 650px;
        }        
        .hero-content .col-md-4 .col-md-12 {
            background: #0083c3;
            height: 400px;
            padding-right: 45px;
            padding-top: 25px;
            padding-left: 25px;
        }
        .hero-content h1 {
            margin: 0;
            padding: 30px 0;
        }
        .hero-content h5 {
            margin: 0;
            padding: 0 0 40px 0;
        }
        .shapeimg {
            width: 100%;
            top: -100px;
            position: relative;
            left: 0;
            right: 0;
        }
        svg {
            position: absolute;
            bottom: 10%;
            left: 50%;
            height: auto;
            width: 100%;
            transform: translateY(0) translateX(-50%);
            min-height: 100%;
            min-width: 100%;
        }
    </style>
</head>
<body>
    <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>
        <svg viewBox="0 0 450 200" preserveAspectRatio="none meet">
            <path d="M-50,100 L-1,100 C150,200 300,0 450,102 L600,100 L600,300 L-250,300 L-250,Z" style="fill:white;"></path>
        </svg>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

如何修复“底部有svg的英雄图像（波动）”

3 个答案: