从顶部到底部褪色图像

-2

我试图将图像从顶部淡入底部，是否有任何方法可以实现此目的？我找了插件，但还没有到目前为止从顶部到底部褪色图像

来源

2014-02-07 Crossman

你到目前为止尝试过什么..？ – Era

您的意思是将图像从顶部拖曳到底部，还是意味着图像褪色到背景上？ –

这是更多的CSS问题。告诉我们你已经尝试过了。 –

做过任何运气

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

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过渡。将需要一些调整。

来源

2014-02-07 09:13:44 user13500

谢谢，我试图找到这样的东西，但无法在网上找到它。 – Crossman

@Crossman：请注意，这不是跨浏览器的解决方案。只意味着作为首发。如果你看*酸*的小提琴*你会看到你可能不得不添加。 – user13500

您可以永诺把一个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

来源

2014-02-07 07:51:03 acid

从顶部到底部褪色图像

回答

相关问题