可能使用HTML/CSS中的部分透明度做一个发光/阴影？

首先，我怎样才能使图像具有部分透明度（我认为你可以做到这一点与PNG格式，但不知道如何？ - 我的Photoshop只需要说明）

其次我该如何使用该图片在使用CSS的布局？我想我需要某种形式的“PNG黑客”

最简单的选项，可能不会为你工作：

WebKit浏览器（Safari浏览器，Chrome浏览器）可以使用-webkit-box-shadow CSS3属性。 Firefox和IE（当然）不支持这个（或者有特定于供应商的等价物）。

你留下了其他选项很多，而且在互联网上广覆盖（因为每一个男人和他的狗想用阴影）

只是有一点我想补充：在你搞砸透明的PNG黑客之前，你应该考虑有多少用户仍然在使用IE6，以及让你的网站对于8年未升级的用户来说非常重要。

2009-02-05 22:25:52 nickf

猜你没看过我的问题。我不是在寻找一个CSS3的答案，3％的人会看到 – 2009-02-05 22:27:53

不，我这样做 - 这就是为什么我说纯粹的CSS解决方案可能不起作用，但它仍然是3％用户的选择。谁知道：这对某人仍然有用。 – nickf 2009-02-05 22:31:54

让它在IE6中运行良好将成为问题。您应该使用经由条件评论仅供IE6负荷加载这样的backgorund像一个单独的样式表：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="my_trans_image.png", sizingMethod="crop");

而在你的标准样式表使用它像任何其他的图像：

background-image: url(/path/to/my_trans_image.png);

加载一个样式表与它IE6特定规则如下所示：

<!--[if lt IE 7]> 
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8" /> 
<![endif]-->

这仅将在IE和如果版本是小于7。

负载

最后说明：IE6正在迅速淡出。如果你不需要支持IE6，那么在普通的旧CSS中将PNG设置为背景图像将适用于所有现代浏览器，而不会有任何实际问题。

2009-02-05 22:28:15

好吧，这就是主意 - 您需要创建透明的PNG。我通常使用Paint.NET来处理这些东西，但如果您觉得使用Photoshop更舒服，请继续。所有你需要的是在你的图像上有一个透明的背景，然后把一些半透明的黑色像素放在那将成为影子。

您可以通过background-image属性在CSS中使用图像。即：

#myDiv 
{ 
    background-image: url('myimage.png'); 
}

IE6不支持PNG开箱即用 - 谷歌IE6 PNG黑客或只是搜索这个网站。此外，请注意，即使IE7支持PNG透明度，但仍然非常慢，因此它接近不适用于高级效果（如阴影）。您可能希望为Internet Explorer提供更多基本的回退式样式。

2009-02-05 22:29:19

要解决您的第二个问题：如果您不介意使用少量JavaScript，则可以使用png fix JavaScript文件自动将IE特定的过滤器应用于图像。

2009-02-05 22:30:57

确保你的发光/阴影使用“正常”的混合模式。其他混合模式（如Multiply或Screen）在Photoshop中真的很棒，但在网络上看起来并不像预期的那样。

如果您需要支持IE6，则需要某种PNG修复解决方案。这篇文章列出了几种：Is there a JavaScript PNG fix for IE6 that allows CSS background positioning?

2009-02-06 00:01:43

典型的IE修复PNG实际上会导致IE在特定条件下崩溃。除非用户调整了注册表设置。除非你希望对你的IE6用户隐含不好，否则请尝试使用VML代替透明PNG图像。 the raphael.js lib是实现这一目标的好方法。

2009-02-06 00:26:16 Breton

回答