在 CSS 中定位矢量图像答案

【问题标题】：Positioning vector images in CSS在 CSS 中定位矢量图像
【发布时间】：2020-05-16 15:56:38
【问题描述】：

我正在我的网站上创建一个wavy header，我试图让它看起来像这样。

但是，我在我的网站上得到了这个。

我尝试更改 className 但它仍然不起作用，这是我的代码：应用.js：

function App() {
  return (
  <div className="App">
    <div className="Wave-container">
      <h1>Hello, world!</h1>
      <p>Check out my awesome waves!</p>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#FFF" d="M0 54.6508V452.104C45.5 452.104 166.824 392.806 306 452.104C401.5 492.794 424.14 456.282 518 388.81C648.5 294.998 708.5 317.038 766.5 317.038C894.591 317.038 866.439 410.314 983 371.856C1159.5 313.622 1205.16 278.703 1271 245.267C1353 203.621 1373 202.317 1440 150.349V115.746V0H1400C1360 0 1280 0 1200 0C1120 0 1040 0 960 0C880 0 800 0 720 0C640 0 560 0 480 0C400 0 320 0 240 0C160 0 80 0 40 0H0V54.6508Z">
      </path>  
      </svg>
    </div>
  </div>
  );
}

App.css：

.Wave-container {
  position: relative;
  background: #09F;
  color: #FFF;
  text-align: center;
  overflow: hidden;
}
h1 {
  font-size: 5rem;
  margin: 7rem 1.25rem 2.5rem 1.25rem;
}
p {
  font-size: 1.5rem;
  margin: 0 1.25rem 5rem 1.25rem;
}

谢谢，任何帮助将不胜感激

【问题讨论】：

标签： css reactjs svg

【解决方案1】：

您可以通过更改其值来编辑视图框。

<svg xmlns="http://www.w3.org/2000/svg" **viewBox="100 200 1200 350"**>

【讨论】：

【解决方案2】：

HTML

    <html>
  <head>
    <meta charset="utf-8">
    <title> Title</title>
    <link rel='stylsheet' href='style.css'>
  </head>
  <body>
  <section class="wave"></section>
  </body>
</html>

CSS

body {
  margin: 0;
  padding:0;
}
section {
  width: 100%;
  min-height: 1000px;
}
.wave{
  position: relative;
  background: red
}
.wave:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  Height: 150px;
  background: url(--url of the wave opacity map);
  background-size: cover;
  background-repeat: no-repeat;
}

您可以使用此地图wave.png 或创建自己的地图。

【讨论】：

可以参考这个视频youtube.com/watch?v=9kkEMHatgZ0

【解决方案3】：

另一种方式。

CSS

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

#wave:before {
        content: "";
        display: block;
        position: absolute;
        border-radius: 100% 50%;
        width: 340px;
    height: 80px;
    background-color: white;
    right: -5px;
    top: 40px;
}

#wave:after {
        content: "";
        display: block;
        position: absolute;
        border-radius: 100% 50%;
        width: 300px;
    height: 70px;
    background-color: #e0efe3;
    left: 0;
    top: 27px;
}

HTML

<div id="wave"/>
<div/>

【讨论】：