代码之家 › 专栏 › 技术社区 › Mormoran

在元素上添加水平和垂直淡入渐变

linear-gradients css3 css

Mormoran · 技术社区 · 8 年前

有没有办法让背景从左到右渐变,从深红色渐变到浅红色(就像一个例子),同时从顶部100%不透明度渐变到底部0%不透明度?

它与对角线斜率不一样,它是X轴上的颜色渐变和Y轴上的透明度。

我一直想看看我能不能应付,但我想不出办法。

[编辑]

这是我的照片。这只是bootstrap的模板之一。

如你所见,我有一个从左(深红色)到右(浅红色)的渐变。

我也希望整个元素在底部淡入白色,这样这个部分的截止不是突然的,而是逐渐的。

正如你在这里看到的,按照对角解,左边的边仍然很锋利。我想要的是整个底面变白,即Y轴上的透明度梯度,而在X轴上仍然有左到右的颜色梯度。

2 回复 | 直到 8 年前

Temani Afif 8 年前

可以使用多个渐变来模拟:

body {
  height:100vh;
  margin:0;
  background:
   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),
   linear-gradient(to right,black,white);
}

Paulie_D 8 年前

也许是一个角的径向梯度

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div {
  width: 80vw;
  height: 80vh;
  margin: 10vh auto;
  border: 1px solid black;
  background: radial-gradient(farthest-corner at left top, rgba(139, 0, 0, 1), rgba(255, 255, 255, 0));
}