可能使用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

回答