html - 部分透明的背景图片

Question

我有一个问题，因为我还没有找到任何解决方案。

所以我有这张图片，如您所见，它在“中心”是完全透明的，在边框部分是透明的。我想要实现的是，“边框”应该是透明的，“中心”应该是红色的。但边框应该是完全透明的。所以在这种情况下，白色。

我不确定这是否可以用 CSS 或 HTML 实现，我之所以需要在 CSS 或 HTML 中这样做是因为我在数据库中循环，并且每条显示的记录都有不同的背景颜色，但“边界”应保持透明。所以用 10 种或更多颜色创建整个图像对我来说不是一个选择，因为那样网站可能会太重。

非常感谢你们，
标记

编辑:
http://i.imgur.com/yMRxtqY.png

所以更准确地说，我已经创建了另一个图像，这是我想要实现的。一开始我得到了左侧的 2 个图像，顶部的第一个在中间是完全透明的，并且如您所见，边界上有大约 50% 的不透明度，所以部分透明。第二张只是一张图片，但第二张图片总是在变化，就像幻灯片一样。

右边的另一张图片将是最终结果，我设置了灰色背景以使其更加明显。所以我的想法是，这可能吗？我想要实现的是像这样剪切幻灯片图像边框。但我不想对幻灯片中的每张图片都进行 Photoshop，所以我在想，也许我可以用 CSS 实现类似的效果。我在考虑一些 z-index 之类的东西。但这不起作用，因为我得到的图像与我在顶部链接的图像类似。

这就是我得到的全部:http://i.imgur.com/g7xpgQG.png
我的问题是，我可以在部分透明的边框上看到图像，我想得到与右侧第一张图像类似的东西(当然没有蓝色的东西，我无法剪切它，我'我不是设计师 :P )

Answer 1

不确定这是否是您要查找的内容，但请查看此链接:http://css-tricks.com/transparency-in-web-design/您可能需要查看您正在使用的 PNG 文件格式。