Почему 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, или запрос изображения может быть сбой (по любой причине).

Цвет с другой стороны всегда будет применяться. Рассматривайте это как своего рода план резервного копирования: -)

---

Edit:

На самом деле вам не требуется файл изображения для простого создания цветного полупрозрачного наложения. Достаточно background-color и opacity.

Я думаю, что точная причина в том, что jquery ui позволяет применять текстуры (вы можете выбрать их или отключить их в приложении ThemeBuilder на веб-сайте jquery ui. Именно поэтому изображение используется, даже когда нет текстура выбрана. Никакая текстура на самом деле не является «плоской» текстурой. Вы можете увидеть ее в названии файла изображения:

ui-bg_flat_75_aaaaaa_40x100.png

• плоский = без текстуры, плоский цвет
• 75 = непрозрачность текстуры (с использованием альфа-канала png)
• aaaaaa = цвет текстуры
• 40x100 = размер рисунка

Если вы примените текстуру «белые линии» к оверлею в ThemeBuilder, он сгенерирует файлы изображений с таким именем:

щ-bg_ белый-линии _75_aaaaaa_40x100

Первая часть ответа остается в силе, но это больше основная причина в случае jquery ui.

Answer 2

Я думаю, что вы можете использовать полупрозрачные фоны png для своих виджетов при создании пользовательских загрузок jquery ui. Таким образом, важно, чтобы прозрачные части имели цвет ниже.

Редактировать: То есть построитель тем построен так, чтобы всегда включать цвет и png, и придерживаться этих схем, он включает сплошной цветной png, если ваша текстура сплошная, а не клетчатая, полосатая или градиентная. варианты.

См. Разницу между:

с полупрозрачным png

с твердым 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;

Поскольку цвет является первым параметром в сокращенной версии, его необходимо указать.Он вступает в силу, если, например,

• фоновое изображение не найдено
• или (в этом случае) высота элемента увеличивает высоту фонового изображения
• или ваше фоновое изображение содержит прозрачность.

Если вы просто хотите указать цвет, вы можете сделать это:

background-color: #AAA;

или что-то (сокращенная версиятолько один параметр):

background: #AAA;

тогда остальные параметры будут установлены по умолчанию.Если вы хотите такое же выражение, но без изображения, вы можете сделать это так:

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

Вот вполне приличное объяснение этой темы.

Answer 4

Просто предположение, но, возможно, это для более старых браузеров, в которых отсутствует поддержка PNG или только «частичная» поддержка желаемого эффекта, или для тех, кто забывает копировать изображения в