为什么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 =无纹理，扁平color
• 75 =纹理的不透明度(使用pngαchannel)
• aaaaaa = texture
• 40x100的颜色=图案的大小

如果您将“白线”纹理应用于ThemeBuilder中的覆盖，它将生成具有以下名称的图像文件：

ui-bg_white-lines_75_aaaaaa_40x100

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

Answer 2

这只是一种猜测，但可能是针对缺乏PNG支持的老式浏览器，或者只是对它们想要实现的效果的“部分”支持，或者是针对那些忘记复制图像的浏览器

Answer 3

您拥有的是用于设置背景的CSS速记属性。你也可以这样写：

background-color: #AAA;
background-image: url(images/ui-bg_flat_75_aaaaaa_40x100.png);
background-position: 50% 50%;
background-repeat: repeat-x;

由于颜色是速记版本中的第一个参数，因此必须指定它。它在以下情况下生效：

• -image is
• or (在本例中)元素的高度扩展了背景图像的高度
• 或你的背景图像包含透明效果。

如果你只想指定一种颜色，你可以这样做：

background-color: #AAA;

或者(只有一个参数的速记版本)：

background: #AAA;

然后，其他参数将设置为默认值。如果你想要相同的表达式，但没有图像，你可以这样做：

background: #AAA none 50% 50% repeat-x;

Here's对这个话题做了一个相当好的解释。