如何使用渐变背景遮盖图像？

Question

我有一些图片，想要去掉每张图片的两个角。被删除的部分应该是透明的，这是我无法解决的部分。以下是两张图片，展示了我的意图：

这是一个空白的图片。白色是我想要展示的部分。蓝色部分则显示了文档背景渐变色。 这是我最终想要的效果。再次强调，蓝色部分应该是透明的，与文档渐变色相同。 有人有什么好的想法吗？

- Alaa Badran

Answer 1

在 Webkit 浏览器中，您可以使用 mask-box-image。将您的图像放入一个带有 image-mask 类的 div 中，然后使用透明 png 的 mask-box-image。

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

在一直闪耀的CSS Tricks网站上有一篇很棒的文章 - http://css-tricks.com/webkit-image-wipes/

但很遗憾，它只适用于Webkit。

- SpaceBeers

---

请注意，渐变是从文档背景中生成的。因此，如果该图像及其蒙版的位置发生变化，则渐变将不会固定。 - Alaa Badran

这是一篇涵盖使用SVG图像的更多浏览器的文章： https://dev59.com/0moy5IYBdhLWcg3wo_no - Breezer

@AlaaBadran - 我不知道有这样的事情。抱歉。 - SpaceBeers

@SpaceBeers 你可以在这里找到更多的文档资料http://developer.mozilla.org/zh-CN/docs/CSS/mask - Breezer

@AlaaBadran - 顺便提一下，SVG在Android设备上不受支持。 - SpaceBeers

Answer 2

有些人可能不喜欢我的非代码答案，但你可以在图像本身中完成吗？请不要因为我建议这个而讨厌我，但有时候代码并不能解决所有问题。

1. 将图像保存为PNG格式。
2. 确保您正在处理的图层不是“背景”图层（如果您使用的是Photoshop）。
3. 使用橡皮擦/选区工具删除您想要透明的部分。您可以模糊选区工具的边缘以使其“淡化”。
4. 根据您在Photoshop或其他编辑程序中的设置，"透明"部分应该是一个带有灰白相间的方格图案。
5. 将图像保存为PNG格式，并将其用于代替编码的遮罩。

当然，如果您正在动态加载图像或由于其他原因依赖于代码来遮罩图像，则此方法无效，但它应该有效。早期版本的IE存在一些PNG格式的问题，但在我的当前项目中，我没有遇到IE9、IE8或IE7的问题。

- ACannan