如何创建适应不同屏幕尺寸的响应式对角背景渐变？

Question

我正在尝试创建一个响应式背景渐变，该渐变在整个页面上对角延伸。渐变应适应不同的屏幕尺寸，保持其对角线方向和比例。我尝试过使用具有线性渐变和背景大小的 CSS 渐变，但我无法使其响应式工作。

这是我迄今为止尝试过的示例：

CSS

  background-image: linear-gradient(to bottom right, #ff69b4, #333);
  background-size: 100% 100vh;
}

此代码创建了对角渐变，但它不适应不同的屏幕尺寸。当我调整浏览器窗口大小时，渐变会扭曲并失去对角线方向。

任何人都可以提供有关如何实现适用于不同屏幕尺寸的响应式对角背景渐变的解决方案或指导吗？

Answer 1

如果您可以提供可重现的代码，其他人会更容易理解您的问题。

我猜这对你有用。

尝试在文档或正文的主容器上使用背景，而不是背景图像（以适合的为准）。 像这样的东西。

{
background:-webkit-linear-gradient(to bottom right, #ff69b4, #333);
}

希望这有帮助！