我想创建一个图片到背景的渐变,有点像这样:
但我希望它不是从下到上淡入淡出,而是从右到左淡入淡出,反之亦然。
即使我尝试过:
background: -moz-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
没用!
如有任何帮助,我们将不胜感激!
最佳答案
你必须使用从右到左的线性渐变。看看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 渐变的更多信息.
关于html - 图片到背景的渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39606915/