是否可以在 CSS 中渲染透明的 Photoshop 图像？答案

【问题标题】：Is it possible to have a transparent photoshop image render in CSS?是否可以在 CSS 中渲染透明的 Photoshop 图像？
【发布时间】：2010-05-26 01:46:24
【问题描述】：

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

谢谢

【问题讨论】：

只是为了确定你想要做什么，你能发布你的相关 css/html 吗？

标签： css photoshop

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

PNG-24 格式支持 Alpha 通道。这是每个像素的透明度值，因此它可以是从 100% 透明到 100% 实心（在 256 个级别中）的任何值。

如果你的图片大部分是全透明或全实心像素，你可以使用透明度索引，但如果它有很多部分透明的像素，你必须使用 alpha 通道。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

正如 SLaks 所指出的，为此请使用 PNG 图像文件。 JPEG 不行，我不知道为什么 GIF 不行……

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

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

所以真的就这么简单。只需将具有透明度的图片另存为 PNG。

【讨论】：

【解决方案5】：

如前所述，您需要将其另存为 .png 文件，但对于 IE6，这很棘手。这取决于您拥有的图像是否使用过渡到透明度的渐变。比如影子。

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

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

【讨论】：

【解决方案6】：

我建议使用 .gif 文件类型；它支持透明背景并且在大多数情况下都有效。 .jpgs 根本不支持透明背景。 .pngs 支持漂亮的 alpha 透明背景，但在 IE6 中不支持。（使用 AlphaImageLoader 过滤器会导致page slowdown 和browser crashes。）

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

【讨论】：