Question

我正试图将图像从顶部淡化到底部，有没有办法实现这一目标？我已经找了插件，但到目前为止还没有运气

Answer 1

你总是可以在图像上放置div并淡化其背景

    .overlay {
        content: '';
        width: 200px;
        height: 200px;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

    }

我在fiddle

中完成了这项工作

Answer 2

阅读你的问题，因为你想逐渐从顶部淡出。如果是这样，这可能是一个开始：

Fiddle

基本上使用图像上方的绝对div并逐渐设置渐变。

this.setFade = function() {
    this.fad.style.background = 
    "linear-gradient(to bottom, " + 
    "rgba(255,255,255,"+(this.pts/100)+") 0%," + 
    "rgba(255,255,255,"+(this.pts/this.aggr)+") 100%)";
}

你也可能会逃避这样的事情：

Fiddle

主要在具有渐变背景的元素上使用CSS过渡来实现不透明度。需要一些调整。

从上到下淡化图像

2 个答案: