Html 响应性较小/CSS线条渐变背景

因为我发现创建静态图像背景很有挑战性，比如下面的示例，它是响应性的，覆盖不同的分辨率和高度/宽度，所以我考虑使用CSS3颜色渐变来重现相同的背景，并使其动态扩展

对于如何用CSS重新创建这样的背景，我将向您提供有关工具/提示和技巧等方面的任何信息。我已经研究过用于生成CSS规则的在线工具，例如，但这些工具并没有在两种颜色之间创建清晰的线条，比如在我的示例中

---

尝试在彼此顶部设置2个线性渐变，首先使用

rgba（）

颜色，不透明度为几%。（或

hsla（）

） 第二个是100%不透明度。大概是这样的：

background:
    linear-gradient(
    130deg ,
    rgba(171, 17, 51, 1) 30%,
      rgba(255, 51, 102, 0.75)  
    ),
    linear-gradient(
    200deg ,
    #AB1133 50%,
      #FF3366 50%
    )
    ;

---

根据您的需要调整它

我已经看过基于不同选项创建css规则的不同在线工具，但没有一个能让我重现与这里相同的背景。在第二个线性渐变中使用十六进制而不是rgba/hsla颜色有什么原因吗？它不需要是半透明的：）这是为了让点更清楚——实际上是坦克！您知道使用css和浏览器渲染的速度有多快吗？我认为它比根据分辨率下载76-400KB的图像文件更快。不知道，但一旦图像进入浏览器缓存。。。这两种颜色中的一种可能是背景色。您如何根据浏览器的宽度和高度来设置背景色。现在你需要div的静态大小。在我的例子中，我直接将背景设置为body而没有div，但我相信我的问题仍然适用。