jquery - 为什么 jquery-ui-dialog 同时使用背景颜色和图像进行叠加？

Question

jquery-ui-dialog 为模态对话框使用覆盖 div。div 具有这种样式:

.ui-widget-overlay {
  background: #AAA url(images/ui-bg_flat_75_aaaaaa_40x100.png) 50% 50% repeat-x
  opacity: 0.3;
}

为什么要同时指定背景颜色和图像？为什么不只是一种颜色？

Answer 1

我认为始终将颜色与背景图像一起应用会更安全。

浏览器不支持 png 格式，或者图像请求可能失败(无论出于何种原因)。

另一方面，颜色将始终应用。将其视为一种备份计划:-)

---

编辑:

实际上，您不需要图像文件即可简单地创建彩色半透明叠加层。只需 background-color 和 opacity 就足够了。

我认为确切的原因是 jquery ui 允许应用纹理(您可以在 jquery ui 网站上的 ThemeBuilder 应用程序中选择或禁用它们。这就是使用图像的原因，即使没有选择纹理。没有纹理实际上是“平面”纹理。您实际上可以在图像文件的名称中看到它:

ui-bg_flat_75_aaaaaa_40x100.png

• flat = 没有纹理，颜色单一
• 75 = 纹理的不透明度(使用 png alpha channel )
• aaaaaa = 纹理的颜色
• 40x100 = 图案的大小

如果您将“白线”纹理应用到 ThemeBuilder 中的叠加层，它将生成具有此名称的图像文件:

ui-bg_white-lines_75_aaaaaa_40x100

答案的第一部分仍然有效，但这是 jquery ui 案例的主要原因。