是否有可能在CSS中呈现透明的photoshop图像？

Question

是否可以在CSS中使用透明的photoshop图像渲染？我尝试保存为jpg和gif，选择了透明度，但是当我在css中覆盖它时，它会显示它背后的背景颜色而不是它下面的图像。我玩z-index并没有帮助。

由于

Answer 1

JPEG图像不支持透明度 您需要将图像保存为PNG文件，它确实支持透明度。

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

Answer 2

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

透明度有两种类型，透明度索引和Alpha通道。 GIF和PNG-8格式支持透明度索引，即选择256种颜色中的一种来表示透明度。这意味着图像中的每个像素只能是100％透明或100％实体。

PNG-24格式支持alpha通道。这是每个像素的透明度值，因此它可以是从100％透明到100％实体（256级）的任何内容。

如果您的图像大部分是完全透明或完全实心的像素，则可以使用透明度索引，但如果它具有大量部分透明像素，则必须使用Alpha通道。

请注意，旧版本的IE在正确显示PNG-24图像的透明度方面存在问题。

Answer 3

首先，将透明背景（如无背景）作为photoshop文件的第一层。 确保它在背景中有灰色和白色方块，这意味着它是透明的。 当您准备好保存时，请转到“文件”菜单，然后单击“存储为Web” 选择PNG文件格式并确保选中“透明度”。 只需按SAVE并给它一个名称，并将photoshop图像保存到透明背景PNG文件中，该文件呈现更多颜色，并且它比GIF文件小，并且与jpg一样好。

Answer 4

正如SLaks指出的那样，请使用PNG图像文件。 JPEG不会这样做，我不确定为什么GIF不起作用......

我看了一个涉及一些半透明背景及其CSS的项目，这就是我发现的：

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

所以真的很简单。只需将透明度保存为PNG即可。

Answer 5

如上所述，您需要将其保存为.png文件，但在涉及IE6时这很棘手。这取决于您拥有的图像是否使用渐变到透明度的渐变。比如阴影。

如果您的图像具有阴影（或任何渐变），而不是最好使用.png，但现在这将适用于IE6，您应该遵循SLaks的建议。根据我的经验，虽然我远离这样的javascript修复，只是选择保存具有所需背景的图像。

如果你没有渐变，那么.gif是可行的方式，因为它将在所有浏览器中得到支持。

Answer 6

我建议使用.gif文件类型;它支持透明背景，适用于大多数情况。 .jpgs根本不支持透明背景。 .pngs支持漂亮的alpha透明背景，但不支持IE6。 （使用AlphaImageLoader过滤器可能会导致page slowdown和browser crashes。）

首先，请确保您的图像在Photoshop中具有透明背景 - 通常是白色和灰色棋盘格。然后，从“文件”菜单中选择“保存为Web”（或接近该版本的内容，它在不同版本中有所不同），选择GIF预设最佳效果，并确保选中“透明度”。