html - 图片到背景的渐变

Question

我想创建一个图片到背景的渐变，有点像这样:

http://jsfiddle.net/yw9v7zm5/

但我希望它不是从下到上淡入淡出，而是从右到左淡入淡出，反之亦然。

即使我尝试过:

background: -moz-linear-gradient(right,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);

没用!

如有任何帮助，我们将不胜感激!

Answer 1

你必须使用从右到左的线性渐变。看看this fiddle 。

这是更改后的 css 代码。

#container {
    position:relative;
    padding:50px;
    margin:50px;
}
#contents {
   background:transparent
     }
#gradient {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 50px;
    left: 50px;
    height: 375px;
    width: 375px;
    background: none;
    background: -webkit-linear-gradient(right, rgba(255,255,255,.8) , rgba(226, 226, 226, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}

您可以在此 article 中了解有关 css 渐变的更多信息.