网页设计：我网站的图像不透明答案

【问题标题】：Web Design: opacity on images for my website网页设计：我网站的图像不透明
【发布时间】：2011-03-07 19:24:17
【问题描述】：

我正在建立一个网站，我想创建一个半透明的菜单。我知道 .gif 图像类型启用透明度，但根据我的经验，不是半透明的（透明和不透明之间的任何东西） - 默认情况下，它似乎将不透明度设置为 100%，即没有任何半透明/透明度的实心图像。

我不确定问题出在文件类型上，还是与我导出菜单的方式有关。如果值得的话，我正在使用 Fireworks 来创建和导出我的菜单。

按原样，我正在将我的菜单的单独文件导出为 .png，这似乎支持半透明图像，但我知道我很快就会想减小这些图像的文件大小，所以有没有除了使用 .png 文件类型之外，获得半透明图像的更好选择？

谢谢，帕特里克

【问题讨论】：

大多数最新的浏览器都支持 opacity 样式属性。试试吧
次要 nit：虽然“半透明”有时被错误地用来表示半透明，但它正确地指的是光被漫射的效果。例如，有色车窗是“半透明的”，而磨砂玻璃是“半透明的”。我假设您正在寻找多位透明度（在 Photoshop 中降低图层的不透明度），而不是实际的半透明度（如 Windows 7 的 Aero 主题中的窗口镶边）。
是的 Phrogz，就是这样 :)

【解决方案1】：

我会说 PNG 可能是最好的选择。更现代的浏览器（阅读：不是 IE6）理解它提供的 8 位 alpha 通道，而 GIF 仅具有透明度键。

如今，网站的瓶颈通常不是图片的大小（无论是尺寸还是数据），而是加载页面所需的请求数。更现代的网站设计尝试使用 CSS Spriting（woot.com，大多数谷歌）等技术将尽可能多的图像打包成一个。另一个瓶颈通常是没有正确设置缓存，迫使回访者重新加载一堆东西。

您会看到 google 的各种页面缓存了所有可以缓存的内容，并减少了单个页面需要下载的内容数量（将所有 Javascript 合二为一，所有 CSS 样式表合二为一），以便浏览器发出 2 次和 3 次请求而不是 15-20。

我会使用 PNG，并研究 CSS sprites 和缓存作为替代优化。

请参阅here，了解在 google 主页上使用的图片精灵示例。

【讨论】：

谢谢Digitlworld，我会试试看的。我还将研究 css spriting 和缓存，我相信这对网站的性能是有益的。
@Pat W3Schools 有一个相当不错的 CSS sprites 教程。它基本上只是在元素上移动背景图像。唯一的缺点是该技术仅适用于与您要显示的精灵贴图部分大小完全相同的元素。仔细规划可以在一个请求中加载所有页面图像。