【发布时间】：2012-09-04 06:41:42
【问题描述】：
我有图像，我想删除每个图像的 2 个角度。 删除的部分应该是透明的，这是我无法修复的部分。 这里有 2 张图片展示了我想要做的事情：
这是一张空白图片。白色是我想要展示的部分。蓝色部分显示文档背景渐变色。
这是我最后应该得到的。再次是蓝色部分，对文档渐变色是透明的。
有人知道吗？
【问题讨论】：
【发布时间】：2012-09-04 06:41:42
【问题描述】：
在 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。
【讨论】：
-
请注意，渐变来自文档背景。所以如果这张图片的位置和它的遮罩改变了，渐变将不会被固定。
-
这是一篇使用 svg 图片覆盖更多浏览器的文章stackoverflow.com/questions/8414348/…
-
是否有适用于所有浏览器的解决方案？
-
@AlaaBadran - 我不知道。对不起。
-
@SpaceBeers 你可以在这里找到更多文档developer.mozilla.org/en-US/docs/CSS/mask
有些人可能不喜欢我的非代码答案，但您可以在图像本身中做到这一点吗？请不要因为我的建议而讨厌我，但有时代码并不能解决所有问题。
- 将图像另存为 PNG。
- 如果您在 Photoshop 中，请确保您正在处理的图层不是“背景”图层。
- 擦除/使用侯爵工具删除您想要透明的图像部分。您可以模糊侯爵工具的边缘以使其“淡化”。
- 根据您在 Photoshop 或其他编辑程序中的设置，“透明”部分应为灰色和白色方格。
- 将图像保存为 PNG 并使用它来代替编码蒙版。
当然，如果您正在动态加载图像或出于其他原因依赖代码来屏蔽图像，这将不起作用，但它应该可以工作。早期版本的 IE 对 PNG 有一些问题，但在我当前的项目中，我没有遇到过 IE9、IE8 或 IE7 的问题。
【讨论】：