问用“背景”css组合两个线性梯度？
EN

Stack Overflow用户

提问于 2022-03-02 17:21:44

回答 1查看 240关注 0票数 0

我试图为一个div创建一个背景梯度，它遵循以下设计：

背景有一个水平梯度linear-gradient( to right, #84d2ff, #8d5acd)，也有一个垂直梯度从白色向下(不透明)。

是否可以使用CSS组合这两个梯度？

javascript

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-02 17:48:58

你申请的每一种渐变都是不透明的，所以它们中的一种总是放在另一种之上。您需要使用alpha值应用淡出效果。

更多细节，请看这里：How to combine two css3 gradients ?

.double-gradient {
  display: grid;
  place-items: center;
  height: 200px;
  width: 200px;
  background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(251, 251, 251, 0.1) 100%), linear-gradient(90deg, #84d2ff, #8d5acd);
}

<div class="double-gradient">
  Double Gradient
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71326724

复制

相似问题

问用“背景”css组合两个线性梯度？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用“背景”css组合两个线性梯度？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用“背景”css组合两个线性梯度？
EN