使用 CSS - 浏览器兼容

Question

我在网页设计方面遇到问题，因为图像压缩是一个重要因素，我自己为网站拍摄了照片，并选择在图像横幅上添加垂直渐变，渐变为透明（图像 post-处理）。问题是，为了显示透明度，我必须将文件保存为 .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

使用 CSS - 浏览器兼容

Vertical fade to transparency on img using CSS - Browser Compatible

html

css

compression

transparency