使用CSS垂直淡出img透明度 - 兼容瀏覽器

Question

由於圖像壓縮是一個重要因素，因此我在網頁設計方面存在問題，我自己爲網站拍攝了照片，並選擇在圖像橫幅上添加垂直漸變淡入透明（在圖像後期處理中）。問題是，爲了顯示透明度，我不得不將文件保存爲.png類型，但是使用png壓縮，我只能將圖像縮小到1.5mb，這並不理想......我認爲唯一的工作就是在CSS中實現圖像的淡入淡出效果，但我需要一些瀏覽器兼容的東西（IE的例外..）。我一直無法找到任何東西。是否有任何CSS樣式可以完成此任務，以便我可以將圖像保存爲jpeg。理想的結果是如下：

Answer 1

您可以使用一個div，將其放置在圖像上，並給它一個梯度：

<img src="image.jpg" alt="" /> 
<div class="gradient"></div> 

CSS：

.gradient { 
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); 
    height: 200px; 
    margin-top: -200px; 
    position: relative; 
    width: 600px; 
} 

實時預覽：JSFiddle