在一个 HTML 元素上放置多个径向渐变的最合乎逻辑的方法是什么

Question

对于客户，我正在尝试在 HTML 元素上实现背景，其中包含 2 个径向渐变。一个位于右上角，一个位于左下角。我的 CSS 只渲染其中一种径向渐变。

我试过将两个径向渐变元素作为背景：

body {
            width: 100vw;
            height: 100vh;
            background-color: green;
            background:
                radial-gradient(
                    circle at top right,
                    red,
                    black 20%

                ),
                radial-gradient(
                    circle at bottom left,
                    yellow,
                    orange 20%
                );
        }

只有第一个radial-gradient出现，第二个没有。当我在 de CSS 标记中切换两个渐变的位置时，颜色会发生变化。所以看起来好像只识别了第一个梯度。

Answer 1

我不确定您希望在结果中看到多少颜色，但我猜您正在寻找这样的东西。

body {
    width: 100vw;
    height: 100vh;
    margin:0;
    background-color: green;
    background-image:
        radial-gradient(
            circle at top right,
            red,
            black 20%,
            transparent 40%

        ),
        radial-gradient(
            circle at bottom left,
            yellow,
            orange 20%,
            transparent 40%
        );
}

您的代码存在一个问题，即您对背景图像使用了 background shorthand，这会重置背景颜色，因此绿色不再存在。请改用 background-image。
另一个是两个渐变都覆盖了整个页面，而你显然希望它们只占据右上角和左下角。我通过从 40%.
给他们两个 transparent 来解决这个问题。我冒昧地给正文 0 边距，以摆脱滚动条。

Answer 2

My CSS only renders one of the radial gradients.

只是因为您使用的是不透明颜色，默认情况下渐变将覆盖所有元素，因此您只会看到顶层。

除了Mr Lister的回答，你可以调整background-size来控制space每个渐变应该采取：

body {
  margin:0;
  height: 100vh;
  background: 
    radial-gradient(circle at top right, red, black 40%) right, 
    radial-gradient(circle at bottom left, yellow, orange 40%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}

这看起来有点难看，但如果你想要一个连续的背景，请确保两端颜色相同：

body {
  margin:0;
  height: 100vh;
  background: 
    radial-gradient(circle at top right  , red,    black  40%, green 60%) right, 
    radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
  background-size:50.5% 100%;
  background-repeat:no-repeat;
}

在一个 HTML 元素上放置多个径向渐变的最合乎逻辑的方法是什么

What would be the most logical way of putting multiple radial gradients on one HTML element

html

css

radial-gradients