如何在径向渐变中控制椭圆的高度 [英] How to control height of ellipse in radial gradient

问题描述

我正在尝试使用径向渐变作为背景，下面是代码.

I am trying to use radial gradient for my background and below is the code.

div {
  width: 778px;
  height: 100px;
  background: radial-gradient(ellipse at top center, green, yellow 229px);
  background-size: 100% 100%;
  background-position: 0% 0%;
}

<div></div>

当我增加div的高度时，它显示为

When I increase the height of the div it is appearing as

但是我们想要使辐射半径像下面的椭圆一样具有固定的垂直半径

But we want to have fixed vertical radius for ellipse in radiant like below one

我尝试播放背景尺寸，但div的高度不固定.所以我真的不能设置背景大小.

I tried to play around the background-size but the height of the div is not fixed. so I really cant set background-size.

任何帮助将不胜感激.预先感谢.

Any help would be greatly appreciated. Thanks in advance.

推荐答案

使用值代替省略号

body {
  background: radial-gradient(220px 80px at top center, green, yellow);
  margin: 0;
  height: 100vh;
}

<ending-shape>

可以是circle或ellipse；确定渐变的结束形状分别是圆形还是椭圆形.如果省略，则如果<size>是单个<length>，则结束形状默认为圆形，否则为椭圆

Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise

<length-percentage>{2}

显式给出椭圆的大小. 第一个值代表水平半径，第二个值代表垂直半径.百分比值相对于渐变框的相应尺寸.负值无效.

Gives the size of the ellipse explicitly. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

参考: https://drafts. csswg.org/css-images-3/#valdef-radial-gradient-end-shape

另一种替代方法是使用固定的background-size:

Another alternative is to use a fixed background-size:

body {
  background: 
    radial-gradient(farthest-side at top center, green, yellow)
      top center/350px 80px no-repeat,
    yellow;
  margin: 0;
  height: 100vh;
}

这篇关于如何在径向渐变中控制椭圆的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！