时间戳

首页 > 解决方案 > 如何使我的背景看起来像 css3 中的图像中的背景？

css - 如何使我的背景看起来像 css3 中的图像中的背景？

问题描述

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

在此处输入图像描述

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

如果有人想知道我使用的是什么属性而不​​是下面提到的属性：

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

标签： csssassbackground

解决方案

你想得到这样的东西吗？

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>

它是如何工作
的 在您的背景中，您可以使用线性渐变，在此您可以知道它的方向。在这个例子中，我使用“到右上角”，这使得起始颜色从左下角开始，结束颜色在右上角。

您可以使用各种方向，例如“右下角”或“右下角”。

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

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

推荐阅读