Dlaczego jquery-ui-dialog używa zarówno koloru tła, jak i obrazu dla nakładki?

Question

Okno dialogowe jquery-ui używa nakładki div dla modalnych okien dialogowych. Div ma ten styl:

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

Dlaczego to określenie zarówno kolor i obraz tła? Dlaczego nie tylko kolor?

Answer 1

myślę, że jest bezpieczniejsze, aby zawsze stosować kolor wraz z obrazem tła.

Przeglądarka nie może obsługiwać formatu PNG lub żądanie obrazu może się nie udać (bez względu na przyczynę).

Kolor z drugiej strony będzie zawsze stosowany. Zobaczyć go jako swego rodzaju planu tworzenia kopii zapasowych :-)

---

EDIT:

rzeczywiście nie wymagają plik obrazu po prostu stworzyć kolorową półprzezroczystą nakładkę. Wystarczy background-color i opacity.

myślę dokładna przyczyna jest taka, że ​​jQuery UI umożliwia zastosowanie tekstur (można wybrać je lub wyłączyć je w aplikacji ThemeBuilder na stronie internetowej jQuery UI. To dlatego obraz jest używany, nawet gdy nie wybrano tekstury . Nie struktura jest rzeczywiście „płaski” tekstury można rzeczywiście zobaczyć go w nazwie pliku obrazu.

ui-bg_flat_75_aaaaaa_40x100.png 

• płaskim = brak tekstury, płaski kolor
• = krycie tekstury (używając png kanał alfa)
• aaaaaa = koloru tekstury
• 40x100 = wielkość wzoru

Jeśli stosuje się "biało-linie" tekstury do nakładki w ThemeBuilder będzie generowany plików graficznych o tej nazwie:

ui-bg_ biało-linie _75_aaaaaa_40x100

Pierwsza część odpowiedzi jest nadal ważna, ale jest to bardziej główny powód w przypadku jquery ui.

Answer 2

tylko przypuszczenie, ale być może jest to dla starszych przeglądarek, które nie mają wsparcia PNG lub jedynie wsparcie „częściowe” za efekt chcą osiągnąć, lub dla tych, którzy zapominają, aby skopiować obrazy całej

Answer 3

To, co masz, to skrócona własność CSS do ustawienia tła. Możesz również napisać:

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

Ponieważ kolor jest pierwszym parametrem w wersji skróconej, należy go podać. Odnosi skutek, np.

• tło-image nie znaleziono
• lub (w tym przypadku) wysokość elementu rozciąga wysokość tle wizerunku
• lub Twój background-image contains transparacy.

Jeśli chcesz tylko określić kolor, można też to zrobić:

background-color: #AAA; 

lub że (skrótowej wersji z tylko jednego parametru):

background: #AAA; 

inne parametry zostanie wtedy ustawiony jako domyślny. Jeśli chcesz tego samego expresseion ale bez obrazu, można to zrobić tak:

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

Here's całkiem przyzwoite wyjaśnienie tego tematu.

Answer 4

Myślę, że możesz użyć półprzezroczystych png tła dla swoich widgetów, gdy budujesz niestandardowe pliki do pobrania jquery. Dlatego tak ważne jest, aby przezroczyste części miały kolor poniżej.

Edycja: Oznacza to, że budowniczy motywów jest zbudowany tak, aby zawsze zawierał kolor i png, i aby trzymać się tych schematów, zawiera jednolity kolor png, jeśli tekstura jest lita, w przeciwieństwie do kratkę lub paski opcje gradientu.

Zobacz różnicę pomiędzy:

with semi transparent png

with solid png