css - 使用 CSS - 浏览器兼容性在图像上垂直淡化到透明度

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