如何使用渐变背景屏蔽图像？

Question

我有图像，我想删除每个图像的2个角度。 删除的部分应该是透明的，这是我无法修复的部分。 这是显示我想要做的2张图片：

这是一张空图片。白色是我想要展示的部分。蓝色部分显示文档背景渐变颜色。

这是我应该在最后得到什么。蓝色部分再次从文档渐变颜色透明。

有人有想法吗？

Answer 1

在webkit浏览器中，您可以使用mask-box-image。使用image-mask类将图像放在div中，然后使用mask-box-image和透明的png

.image-mask {
  -webkit-mask-box-image: url(your_mask.png);
}

有一篇关于常用的CSS Tricks网站的精彩文章 - http://css-tricks.com/webkit-image-wipes/

虽然我害怕，但这只是webkit。

Answer 2

有些人可能不喜欢我的非代码答案，但您可以在图片本身中执行此操作吗？请不要因为我的建议而讨厌我，但有时代码并不能解决所有问题。

1. 将图像另存为PNG。
2. 如果您使用的是Photoshop，请确保您正在处理的图层不是“背景”图层。
3. 删除/使用侯爵工具删除您想要透明的图像部分。您可以模糊侯爵工具的边缘，使其“淡化”。
4. 根据您在Photoshop或其他编辑程序中的设置，“透明”部分应为方格灰色和白色。
5. 将图像另存为PNG并使用它代替编码的蒙版。

当然，如果您动态加载图片或者有其他原因依赖于代码来掩盖您的图像，这不起作用，但它应该有效。 IE的早期版本在PNG中存在一些问题，但我目前的项目中没有遇到IE9，IE8或IE7。