Question

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

但不是从底部到顶部的淡入淡出，我希望它从右到左，反之亦然。

即使我尝试过：

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

它没有用！

任何帮助将不胜感激！

Answer 1

您必须使用从右侧开始并从左侧开始的线性渐变。看看this小提琴。

这是更改后的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渐变的更多信息。

Answer 2

<img src="Beautiful-White-Horse.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">

请检查此链接： - https://webkit.org/blog/181/css-masks/

背景图片梯度

2 个答案: