我在网页设计方面遇到问题,因为图像压缩是一个重要因素,我自己为网站拍摄了照片,并选择在图像横幅上添加垂直渐变,该渐变逐渐变为透明(在图像后处理中)。问题是,为了显示透明度,我必须将文件另存为 .png 类型,但使用 png 压缩后,我只能将图像缩小到 1.5mb,这根本不理想......我能想到的唯一解决方法是在 CSS 中实现图像的淡入淡出,但我需要一些与浏览器兼容的东西(IE 除外......)。我一直找不到任何东西。是否有人知道任何 CSS 样式来完成此操作,以便我可以将图像保存为 jpeg。期望的结果如下:
最佳答案
你可以使用一个 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 - 使用 CSS - 浏览器兼容性在图像上垂直淡化到透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33229394/