时间戳

首页 > 解决方案 > 如何修复“底部带有 svg 的英雄图像（波浪）”

html - 如何修复“底部带有 svg 的英雄图像（波浪）”

问题描述

您好，我目前正在处理我网站的主页。这是一个英雄形象。我想用 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;

这就是它现在的样子以及它应该看起来的样子（设计） 现在的样子

它应该是什么样子

标签： htmlcsssvg

解决方案

好像你已经破坏了布局，试着保持标准的Bootstrap 网格系统。 

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

推荐阅读