使用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