时间戳

首页 > 解决方案 > 无法在页面上将 SVG 波形移得更高（HTML / CSS）

html - 无法在页面上将 SVG 波形移得更高（HTML / CSS）

问题描述

所以我刚刚了解了 SVG 文件并使用了生成器来生成所需的形状。我的网站中有该形状，但它出现在页面底部。我必须滚动才能找到它。如果我尝试使用 top 属性来提高它，它最终只会在形状下方创建一个空白区域。我希望能够移动它而不会在下面得到一个白色的空白区域。谢谢！

@charset "utf-8";
/* CSS Document */
html {
  box-sizing: border-box;
}
*,*::before,*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
    
}
.wave-container {
  background: #FFFFFF;
    position: relative;
    overflow: hidden;
    
    
    

    
    


}
.wave-container > svg {
  display: inline-block;
    vertical-align: middle;

}

.container{
    
    height: 100vh;
    width: 100%;
    background-color: #FFFFFF;
    box-sizing: border-box;
    position: relative; 
}

.navbar{
    width: 100%;
    height: 15vh;
    margin: auto;
    display: flex;
    align-items: center;
    
}

.logo{ 
    cursor:pointer;

    
    
}
nav {
    flex: 1;
    text-align: right;
    padding-right: 10%;
    
}
nav li{
    display: inline-block;
    list-style: none;
    margin: 0px 20px;
    padding-top: 40px;

}

@font-face{
    font-family: "gothambold";
    src: url("GothamBold.ttf");
}
    

@font-face{
    font-family: "sofia";
    src: url("Sofia Pro Regular Az.otf")
}

nav li a{
    text-decoration: none;  
    font-family:"gothambold";
    font-size: 40;
    color: #302F2F;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Index</title>
</head>
<title>Index</title>
    <link rel="stylesheet" href="Style.css">
    <div class="container"> 
    <div class="navbar"> 
    <img src="Logo v3@2x.png" class="logo" width="420" height="96">
        <nav>
            <li><a href="">Platform</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li> 
        </nav>
        </div>
    </div> 
<body>
 <div class="wave-container">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 320"><path fill="#786fdf" fill-opacity="1" d="M0,96L60,112C120,128,240,160,360,160C480,160,600,128,720,106.7C840,85,960,75,1080,85.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>
</body>
</html>

标签： htmlcss

解决方案

您的 .container 高度非常大。尝试将其设置为 100% 或固定数字以将其更改为您喜欢的任何值。

.container{
    */ Change this */ height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    box-sizing: border-box;
    position: relative; 
}

推荐阅读