在CSS中可以使用透明的photoshop圖像渲染嗎？

在CSS中可以使用透明的photoshop圖像渲染嗎？我嘗試使用透明度選擇保存爲jpg和gif，但是當我將其覆蓋在css中時，它顯示背後的背景顏色，而不是其背後的圖像。我玩Z指數，並沒有幫助。在CSS中可以使用透明的photoshop圖像渲染嗎？

謝謝

來源

2010-04-30 bkarj

只是爲了確定你想要做什麼，你可以發佈你的相關的CSS/HTML？ – 2010-04-30 21:05:41

JPEG圖像不支持透明度。
您需要將圖像保存爲支持透明度的PNG文件。

如果您需要支持IE6，你還需要use the filter proeprty。

來源

2010-04-30 21:03:32 SLaks

正如SLaks指出的那樣，爲此使用一個PNG圖像文件。 JPEG不會做，我不知道爲什麼GIF是行不通的......

我接過一看一個項目，我做了一些涉及半透明的背景和它的CSS，這是我發現：

background-image: url(../images/translucent_white.png);

所以它真的就是這麼簡單。只需將圖片以透明度保存爲PNG即可。

來源

2010-04-30 21:09:21

您需要使用支持所需透明度類型的圖像格式進行保存。 JPEG格式根本不支持透明度。

有兩種類型的透明度，透明度索引和alpha通道。 GIF和PNG-8格式支持透明度索引，即選擇256種顏色中的一種來表示透明度。這意味着圖像中的每個像素只能是100％透明或100％實體。

PNG-24格式支持alpha通道。這是每個像素的透明度值，因此它可以是從100％透明到100％固定（256級）的任何值。

如果圖像大多是完全透明的或完全不透明像素，可以使用透明度指數，但如果它有很多部分透明的像素，您必須使用alpha通道。

請注意，早期版本的IE在正確顯示PNG-24圖像中的透明度時存在問題。

來源

2010-04-30 21:24:13 Guffa

首先，有一個透明的背景（如在沒有背景）作爲您的Photoshop文件的第一層。確保背景中有灰色和白色方塊，這意味着它是透明的。當您準備好保存時，轉到文件菜單，然後點擊保存爲網絡選擇PNG文件格式並確保它已選中「透明度」。只需按SAVE並給它一個名稱，並將該photoshop圖像保存到透明背景PNG文件中，該文件呈現更多的顏色，並且比GIF文件更小，並且與jpg一樣好。

來源

2010-04-30 21:39:26 UXdesigner

你需要將它保存爲.png文件，但是這對於IE6來說是非常棘手的。這取決於您使用的圖像是否使用漸變透明度的漸變。例如一個影子。

如果你有，有一個影子（或者任何梯度）比你最好關閉使用。PNG圖像，但它將會爲IE6工作，你應該遵循SLaks的意見。在我的經驗，雖然我遠離這樣的JavaScript修復，只選擇保存圖像W /所需的背景。

如果你沒有一個漸變的話。gif是所有瀏覽器都支持的方式。

來源

2010-05-01 02:36:46 bgadoci

我推薦使用.gif文件類型;它支持透明背景，並在大多數情況下工作。 .jpgs根本不支持透明背景。 .png支持漂亮的alpha透明背景，但不支持IE6。（使用AlphaImageLoader過濾器可能會導致page slowdown和browser crashes。）

首先，確保圖像在Photoshop中具有透明背景 - 通常是白色和灰色棋盤格。然後，從「文件」菜單中選擇「Save for Web」（或接近該文件的不同版本），選擇任何GIF預設效果最佳的方式，並確保選中「透明度」。

來源

2010-05-25 17:46:24 KatieK

在CSS中可以使用透明的photoshop圖像渲染嗎？

回答

相關問題