我怎样才能使我的背景看起来像 css3 中的图像？

Question

我是网络开发的新手。我正在尝试将一个应用程序放在一起。我不知道如何才能像图片中那样实现背景。

我已经尝试过一些角度的线性渐变，但没有帮助。

如果有人想知道属性我使用的是下面提到的那个：

background-image: linear-gradient(90deg, red, blue);

Answer 1

你想得到这样的东西吗？

body{
  height: 400px;
  width: 400px;
  background: linear-gradient(to top right, #9999FF 0%, #9999FF 50%, white 50%, white 100%);
}

<body>
<h1>Some dumy text...</h1>
</body>

工作原理
在您的背景中，您可以使用线性渐变，在此您可以判断它的方向。在此示例中，我使用 "to top right"，这使得起始颜色从左下角开始，结束颜色到右上角。

您可以使用各种方向，例如 "to bottom right" 或 "to right"。

然后你说你想要什么颜色开始，在这个例子中它是一些蓝色。然后你告诉它什么时候应该停止使用这种蓝色，在这个例子中是 50%。然后，如果你想要另一边的白色，你说 "white 50%" 它将开始使用白色直到 100%。

您还可以用它尝试一些其他很酷的东西。例如，您可以说 linear-gradient(to top right, blue 0%, blue 40%, white 60%, white 100%) 请注意，蓝色在 40% 处停止，白色在 60% 处开始。现在它将在它之间转换。

Answer 2

虽然 Jeremy 的回答帮助我达到了效果，但我不得不稍微改变一下以使其看起来像图片中的那个。

我的 Css 文件：

 body{
      height: 100vh;
      background: linear-gradient(to bottom left,#fff 0%, #fff 50%, #8186D5 50%, #8186D5 100%);
    }

我的 HTML 文件：

<body>
</body>

How can i make my background look like the one in the image in css3?