线性，右边渐变到透明渐变，底部有额外的渐变

Question

我第一次无法使用CSS3创建漂亮的渐变。在右侧应该有从黑色到透明的渐变透明渐变。底部是页脚，因此它需要在底部另外淡化为透明。

如果可能，它的外观如何：

页面的背景是图像，因此不可能出现不透明的淡入淡出，请注意页面可以调整大小，因此位置值和大小值需要是相对的而不是绝对像素值。

请提供CSS渐变的解决方案，没有（背景）图像。

我已经尝试了一些可能性，但没有人看起来很好：

div {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    background: url(http://www.okilla.com/uploadfile/1/2013/06/15/11371284566/1371286115_dark-noise-background-8.png);
    background-size: cover;
}

div:before {
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 80px;
    background: -moz-linear-gradient(55deg, rgba(0, 0, 0, 0) 0%, 
                                            rgba(0, 0, 0, 0.5) 60%, 
                                            rgba(0, 0, 0, 1) 100%), 
                -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, 
                                           rgba(0, 0, 0, 1) 40%, 
                                           rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(55deg, rgba(0, 0, 0, 0) 0%, 
                                               rgba(0, 0, 0, 0.5) 60%, 
                                               rgba(0, 0, 0, 1) 100%), 
                -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, 
                                              rgba(0, 0, 0, 1) 40%, 
                                              rgba(0, 0, 0, 1) 100%);
    background-size: 100% 10%, 100% 90%;
    background-repeat: no-repeat;
    background-position: bottom left, 0 1px;
}

http://jsfiddle.net/RgYe2/

Answer 1

一个想法如下：2个线性渐变，然后是径向渐变来做角落

#test {
    width: 800px;
    height: 400px;
    background-image: linear-gradient(90deg,black 60%, transparent 100%), linear-gradient(180deg, black, transparent), radial-gradient(ellipse at top left, black 1%, transparent 70%);
    background-size: 100% 80%, 60% 20%, 40% 20%;
    background-position: top left, bottom left, bottom right;
    background-repeat: no-repeat;
}

body, html {
    height: 99%;
        background-color: lightblue;
}

demo

Answer 2

有一个非常好的网站可以生成渐变背景，我在大多数项目中使用它。 Link here.