提问人：Andrew G. Johnson 提问时间：2/6/2009 最后编辑：LorenzoDonati4Ukraine-OnStrikeAndrew G. Johnson 更新时间：11/13/2013 访问量：3151
可以在 HTML/CSS 中使用部分透明度进行发光/阴影吗？
Possible to do a glow/shadow using partial transparency in HTML/CSS?
问：
好吧，我想这是一个由两部分组成的问题。
首先，我怎样才能使图像具有部分透明度（我认为你可以用 PNG 做到这一点，但不知道怎么做——我有 photoshop 只是需要说明？
其次，如何在使用 CSS 的布局中使用该图像？我想我需要某种“PNG Hack”
答：
1赞
nickf
2/6/2009
#1
可能不适合您的简单选项：
Webkit 浏览器（Safari、Chrome）可以使用 -webkit-box-shadow CSS3 属性。Firefox和IE（当然）还不支持此功能（或有特定于供应商的等效项）。
剩下的其他选项很多，并且在互联网上被广泛报道（因为每个男人和他的狗都想使用阴影）
http://www.google.com/search?q=how+to+make+a+drop+shadow
我只想补充一件事：在你搞砸透明的PNG黑客之前，你应该考虑有多少用户仍在使用IE6，以及让你的网站对那些8年没有升级的人来说是多么重要。
评论
0赞
Andrew G. Johnson
2/6/2009
猜你没有读过我问题的正文。我不是在寻找 3% 的人会看到的 CSS3 答案
0赞
nickf
2/6/2009
不，我做到了 - 这就是为什么我说纯 CSS 解决方案可能行不通，但它仍然是 3% 用户的选择。谁知道呢：这对某人仍然有用。
0赞
Alex Wayne
2/6/2009
Firefox 3 将支持 box-shadow 和 text-shadow 属性。我现在使用的测试版确实如此。它非常光滑。
0赞
Andy Ford
2/6/2009
我读了这个问题，它从来没有说过任何关于 CSS3 或目标浏览器的事情。在某些情况下，这是一个有效的答案/解决方案，但有一个明确说明的警告。+1，因为答案在技术上没有错误。
2赞
Alex Wayne
2/6/2009
#2
- 创建新的 Photoshop 文档
- 添加新图层并在其上绘图
- 删除名为 Background 的图层
- 文件>保存为 Web 所用格式
- 选择 24 位 PNG 格式。
让它在 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设置为背景图像将在所有现代浏览器中工作，没有任何实际问题。
评论
0赞
Tamas Czinege
2/6/2009
um - 24 位 PNG 将没有 Alpha 通道，即没有部分透明度
0赞
Alex Wayne
2/6/2009
这就是 Photoshop 的称呼。它实际上是一个具有透明度的 24 位 PNG，技术上是 32 位。beautifulpixel.com/assets/......
0赞
Tamas Czinege
2/6/2009
真？这真的很令人困惑。
0赞
Filip Dupanović
2/6/2009
我从来没有想过要为 IE6 安装 png 修复程序，但我认为 IE6 CSS 定义将要求您的块元素具有固定的高度和宽度才能使 AlphaImageLoader（） 工作。
0赞
Ben Blank
2/6/2009
@DrJokepu——根据我的经验，“真的很混乱”是Photoshop的典型特征。
0赞
Tamas Czinege
2/6/2009
#3
嗯，这就是这个想法 - 你需要创建透明的 PNG。我通常使用 Paint.NET 来做这些事情，但如果你觉得使用 Photoshop 更舒服，那就继续吧。您所需要的只是在图像上有一个透明的背景，然后在上面放置一些半透明的深色像素，这些像素将成为阴影。
您可以通过 background-image 属性将图像与 CSS 一起使用。那是：
#myDiv
{
background-image: url('myimage.png');
}
IE6 不支持开箱即用的 PNG 透明度 - 谷歌为 IE6 PNG hack 或只是搜索这个网站。另外，请注意，尽管 IE7 支持 PNG 透明度，但它的速度非常慢，因此几乎无法用于阴影等高级效果。您可能希望为 Internet Explorer 设置一些更基本的回退样式。
1赞
Zack The Human
2/6/2009
#4
为了解决您的第二个问题：如果您不介意使用一点 JavaScript，您可以使用 png 修复 JavaScript 文件自动将特定于 IE 的过滤器应用于您的图像。
0赞
Andy Ford
2/6/2009
#5
确保您的发光/阴影使用“正常”的混合模式。其他混合模式（如“乘法”或“屏幕”）在 Photoshop 中确实很棒，但在网络上看起来并不像预期的那样。
如果你需要支持IE6，你需要某种PNG修复解决方案。这篇文章列出了几个： IE6 是否有允许 CSS 背景定位的 JavaScript PNG 修复程序？
我个人最喜欢的是：http://www.dillerdesign.com/experiment/DD_belatedPNG/
1赞
Breton
2/6/2009
#6
典型的 IE PNG 修复实际上会导致 IE 在某些情况下崩溃。除非用户调整了注册表设置。除非您希望对某些 IE6 用户隐含不友好，否则请尝试将 VML 用于透明 PNG 图像。Raphael.js 库是实现这一目标的好方法。
评论