在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图像渲染吗？

回答

相关问题