html - 如何用渐变背景遮罩图像？

Question

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

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

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

有人有想法吗？

Answer 1

在 webkit 浏览器中，您可以使用mask-box-image. 将您的图像放入具有图像掩码类的 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 的问题。