Geek Answers Handbook

Why does jquery-ui-dialog use both background color and overlay image?

jquery-ui-dialog uses an overlay div for modal dialogs. The div has this style:

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

Why does it indicate both background color and image? Why not just color?

+7
source share
4 answers

I think it’s safer to always apply color along with the background image.

The browser cannot support the png format, or the image request may fail (for any reason).

Color on the other hand will always apply. See this as a kind of backup plan :-)

Edit:

In fact, you do not need the image file to just create a color translucent overlay. Just background-color and opacity enough.

I think the exact reason is that jquery ui allows you to apply textures (you can select them or turn them off in ThemeBuilder on the jquery ui website. That's why the image is used even if the texture is not selected. The texture is not really " flat "texture. In fact, you can see it in the image file name:

 ui-bg_flat_75_aaaaaa_40x100.png
  • flat = no texture, flat color
  • 75 = texture opacity (using png alpha channel)
  • aaaaaa = texture color
  • 40x100 = template size

If you apply the “white lines” texture to the overlay in ThemeBuilder, it will generate image files with this name:

u-bg_ <strong> white-lines _75_aaaaaa_40x100

The first part of the answer is still valid, but this is the main reason in the case of jquery ui.

+10
source

Just guess, but maybe this is for older browsers that lack PNG support or only "partial" support for the effect they want to achieve, or for those who forget to copy images through

0
source

You have the CSS shorthand property for setting the background. You can also write:

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

Since color is the first parameter in the shortened version, it must be specified. It acts if, for example,

  • background image not found
  • or (in this case) the height of the element increases the height of the background image
  • or your background image contains transparency.

If you just want to specify a color, you can do this:

 background-color: #AAA;

or what (shortened version with only one parameter):

 background: #AAA;

then other parameters will be set by default. If you want to have the same expression, but without an image, you can do it like this:

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

Here is a pretty decent explanation of this topic.

0
source

I think you can use translucent png backgrounds for your widgets when creating custom jquery ui downloads. Therefore, it is important that the transparent parts have a color lower.

Edit: That is, the builder is thus built to always include color and png, and adhere to these schemes, it includes solid color png if your texture is solid, and not checkered or striped or gradient options.

See the difference between:

with translucent png

with solid png

0
source

More articles:


All Articles