css - 创建半透明图像的最简单方法是什么

Question

我正在尝试创建一个使用半透明按钮(和文本区域)(Alpha 约为 60%)的游戏。除了这些半透明元素外，我几乎可以在 XHTML 和 CSS 中做任何我想做的事情。因此，我正在寻找在我的网页上创建半透明图像的最简单方法。

到目前为止的想法:

1. 创建具有半透明像素的 PNG。这应该是可能的，并且有明确定义的接口(interface)用于使用 PHP 和 GD 包定义 Alpha channel 。问题:我试过了，但图像在我试过的所有浏览器(Chrome、IE8、FF)中都是不透明的。

2. 在 Flash 中完成。我从退休前所做的一些工作中知道如何使用 Flash(*)。问题:Flash 是为专业开发人员而非业余爱好者定价的。

(*) 好吧，Flash 8。但据我所知，即使使用较新的版本，我也可以继续以旧方式创建影片剪辑，它们只是被翻译成一堆 AS。据说可以继续使用 AS2，尽管您不能混合使用 AS2 和 AS3。

1. 在 Flex 中完成。问题:接口(interface)最好被描述为神秘的。即使使用经验丰富的 Flex 开发人员的建议，尝试包含来自另一个 mxml 文件(而不是作为类)的代码也是 PITA。

2. 使用 SVG。这看起来很有希望。 SVG 语法基本上是 XML，元素标签相当明显，属性的交互只是略显神秘，教程中有大量示例。但是……目前大约有一半的浏览器不支持在 标签中使用 SVG。你必须使用 这意味着你不能将它放在 或 中。即使使用嵌入，我在 IE8 中也看到了看起来像“损坏的图像”的图标。

在撰写本文时，我注意到“类似问题”下的几个元素看起来很有希望。但是当我查看它们时，它们使用了 CSS 规范中未提及的属性:opacity、filter:alpha 和 rgba。当使用复杂的语言时，我真的更喜欢在另一个窗口中打开完整的语言规范，或者有等效的死树版本(例如，O'Reilly 鲑鱼书层叠样式表，权威指南，它位于我办公 table 旁边的书架上。

所以我要征求建议。如果一致同意使用 SVG，我将发布我的代码，看看是否有人可以告诉我我做错了什么。

Answer 1

CSS“opacity”属性是完全有效的。它是 CSS3 的一部分，所有浏览器都支持它 (*)。

http://caniuse.com/css-opacity

或者您可以使用半透明的 PNG，如 Alvaro 所展示的那样。他们应该工作得很好。不确定您的尝试发生了什么，但您一定做错了什么。

• 请注意，对于 <= 8 的 IE 版本，您需要改用“过滤器”属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/opacity