從頂部到底部褪色圖像

-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

從頂部到底部褪色圖像

回答

相關問題