Html 背景渐变左上和右下

我已将此css应用于我的DIV

div#envelope{
width: 400px;
margin: 140px 23% 10px 16%;
padding:33px 0 10px 0;
border-radius:2px;
background-color: rgba(255,255,255,0.5);
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0, rgba(255, 255, 255, 0.5)),
color-stop(0.50, rgba(255, 255, 255, 0.5))
);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255,     0.5) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: linear-gradient(to left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
}

---

问题-我想将渐变应用于左上角，将另一个渐变应用于右下角，正确的语法是什么？

您想将渐变应用于左上角，将另一个应用于右下角。但是，您可以使用3种颜色的单个渐变来实现这一点。0%的值在右下角，100%的值在左上角，50%的值在两者之间。你可以随意玩玩这个游戏。希望这能回答你的问题

background:
        linear-gradient(to left top, rgba(0, 255, 255, 1) 0%/*bottom-right color*/, rgba(255, 0, 255, 0.5) 50% /*middle color*/, rgba(255, 255, 0, 1) 100% /*top-left color*/),
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))/*"faked" black background make sure to add last or it will appear before the transparent/colored layer*/;

PS：我只使用了“常规”渐变，而不是所有的跨浏览器渐变（你自己似乎完全有能力做到这一点）

---

PSII：您可以随时向渐变添加更多颜色。

用逗号分隔它们-您正在用此代码覆盖您自己的背景图像，因此您最好删除第一个。此外，语法似乎还不错。但是，您不会在白色背景上看到白色/透明效果。阅读中的评论：这是否回答了您的问题。如果没有，为什么不呢？@Paulie_D谢谢，这很有帮助。@RMo，请注意背景透明度当我在“信封”上设置背景颜色时，我想要的效果几乎像云一样。我有一个我应该提到的身体背景图像，大部分是黑色的，所以白色不适用于纯白色背景。。。谢谢