如何组合两个css3渐变？答案

【问题标题】：How to combine two css3 gradients ?如何组合两个css3渐变？
【发布时间】：2013-11-01 10:41:50
【问题描述】：

我有两个用于 HTML BODY 背景的 CSS 我使用这个 css 作为我页面的背景；我想将这两者重叠并获得综合效果？

    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

第二个是

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

如何将这两者合二为一？

【问题讨论】：

可能重复：stackoverflow.com/questions/423172/…
您可以丢弃渐变的 -ms- 前缀，除非您知道有人实际上仍在使用 IE10 预发行版。（说真的，谁会努力安装预览版，然后在它可用时不升级到完整版本……或者至少在它发布后的去年一段时间内）
@mitthataydogmus ;我尝试了您提到的“可能重复”中提供的选项，但我没有得到所需的结果；所以发布了这个问题。

标签： css gradient linear-gradients

【解决方案1】：

你的代码有两个问题

首先，这两个图像必须在单个 background-image 调用中调用，否则 CSS 的“级联”部分的工作方式将覆盖第一个。因此，需要更改的第一件事是将所有调用按如下方式分组（每个连续调用以逗号分隔）：

background-image: 
  linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%), 
  linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

这就是possible duplicate question noted to do，这是正确的，但它可能对你不起作用，因为...

第二，您定义的每个渐变图像都是不透明的，因此其中一个将在另一个和effectively give you just one image 之上“过度绘制”。我认为您真正想要的是淡入淡出效果，这将需要您使用 alpha opacity 来实现。所以#FFFFFF的每一个实例都需要改成rgba(255, 255, 255, 0)，then you get the blending I believe you seek：

background-image: 
  linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 75%, #A3EF69 100%), 
  linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, 
    rgba(255, 255, 255, 0) 75%, #A3EF69 100%);

【讨论】：