如何在 50% 的屏幕上显示波浪？

Question

在 CSS 中，我想用 50% 的颜色和 50% 的另一种颜色制作背景，但这种颜色需要像这样的波浪来终止：

其实我有：

但它不会占用屏幕的 50%。

这是我的代码：

body {
  background-color: #3f2982;
}

#wavebg {
  position: relative;
  content: "";
  bottom: 0;
  background: url('https://i.imgur.com/IJelEnu.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  float: left;
}

<div id='wavebg'></div>

如何更改为占据屏幕的 50%？

Answer 1

body {
  background-color: #3f2982;
}

body,html{
  height: 100%;
  width: 100%;
  margin: 0;
}

#wavebg {
  background: url('https://i.imgur.com/IJelEnu.png');
  background-size: 70% 100%;
  background-repeat: no-repeat;
  width: 60%;
  height: 200%;
}

<html><body><div id='wavebg'></div></body></html>

Answer 2

body {
      background-color: #3f2982;
      
    }

    #dark-bg {
      width: 45%;
      height: 100vh;
      background-color: #27184f;
      float: left;
    }

    #wavebg {
      position: relative;
      content: "";
      bottom: 0;
      background: url(https://i.imgur.com/IJelEnu.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 50%;
      height: 100vh;
      float: left;
    }

  <div id="bg-container">
    <div id="dark-bg"></div>
    <div id='wavebg'>
    </div>
  </div>

由于您的图片宽度不足以覆盖屏幕宽度的 50%，因此您的背景图片看起来好像卡在了浏览器的左边框中。诀窍是立即将 div 应用到与图像颜色相同的图像。这将使您在屏幕的近似中心获得所需的波浪效果。您可能需要使用 css @media 查询调整 #dark-bg 宽度以获得更好的响应式布局。

衷心希望对您有所帮助。这是您可以得到的结果：

如何在 50% 的屏幕上显示波浪？

How to get a wave on 50% of screen?

css

waveform