CSS background-image - jakie jest prawidłowe użycie?

Jakie jest prawidłowe użycie właściwości CSS background-image? Kluczowe rzeczy, które próbuję zrozumieć, to

1. Czy musi być w cudzysłowie, tj .: background-image: url('images/slides/background.jpg');
2. Czy może to być ścieżka względna (jak powyżej), czy też pełny adres URL?
3. Wszelkie inne kwestie, o których powinienem wiedzieć, aby upewnić się, że działa poprawnie w przeglądarkach zgodnych ze standardami.

Ścieżka może być pełna lub względna (oczywiście jeśli obraz pochodzi z innej domeny, musi być pełna).

Nie musisz używać cudzysłowów w identyfikatorze URI; składnia może wyglądać następująco:

background-image: url(image.jpg);

Lub

background-image: url("image.jpg");

Jednak z W3 :

Niektóre znaki występujące w niecytowanym URI, takie jak nawiasy, znaki odstępu, pojedyncze cudzysłowy (') i podwójne cudzysłowy ("), muszą być poprzedzone ukośnikiem odwrotnym, tak aby otrzymana wartość URI była tokenem URI:' \ (', '\)'.

Dlatego w takich przypadkach konieczne jest użycie cudzysłowów lub cudzysłowów lub zmiana znaczenia znaków.

1. Nie, nie potrzebujesz cytatów.

2. Tak, możesz. Pamiętaj jednak, że względne adresy URL są rozwiązywane na podstawie adresu URL twojego arkusza stylów.

3. Lepiej nie używać cudzysłowów. Myślę, że są klienci, którzy ich nie rozumieją.

1) cytowanie jest dobrym nawykiem

2) może to być ścieżka względna np .:

background-image: url('images/slides/background.jpg');

będzie szukać folderu z obrazami w folderze, z którego ładowany jest plik css. Więc jeśli obrazy znajdują się w innym folderze lub poza drzewem folderów CSS, powinieneś użyć ścieżki bezwzględnej lub względnej w stosunku do ścieżki głównej (zaczynając od /)

3) należy użyć pełnej deklaracji dla obrazu tła, aby zachowywał się spójnie w przeglądarkach zgodnych ze standardami, takimi jak:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Względne ścieżki są w porządku i cudzysłowy nie są konieczne. Inną rzeczą, która może pomóc, jest użycie właściwości „shorthand” backgrounddo określenia koloru tła na wypadek, gdyby obraz się nie ładował lub z jakiegoś powodu jest niedostępny.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Zauważ również, że możesz określić, czy obraz będzie się powtarzał iw jakim kierunku (jeśli nie określisz, domyślnie jest powtarzany poziomo i pionowo), a także położenie obrazu względem jego pojemnika.

Jeśli Twoje obrazy znajdują się w oddzielnym katalogu pliku css i chcesz, aby ścieżka względna zaczynała się od katalogu głównego witryny:

background-image: url('/Images/bgi.png');

po prostu sprawdź strukturę katalogów, gdzie dokładnie obraz jest przypuśćmy, że masz folder css i folder obrazów poza folderem css, wtedy będziesz musiał użyć "../ images / image.jpg" i będzie działać tak, jak dla mnie, po prostu upewnij się, że struktura katalogu.

naprawdę nie potrzebujesz cudzysłowów, jeśli powiedzmy, że używasz obrazu z pliku css, który może być

{background-image: url(your image.png/jpg etc);}

Nie musisz używać cudzysłowów i możesz użyć dowolnej ścieżki!

Zapoznaj się z odpowiednimi stronami referencyjnymi dla punktów witryny dla obrazu tła i identyfikatorów URI

1. Nie musi być w cudzysłowie, ale jeśli chcesz, możesz go użyć. (Myślę, że IE5 / Mac nie obsługuje pojedynczych cudzysłowów).
2. Możliwe jest zarówno względne, jak i absolutne; ścieżka względna jest względna w stosunku do ścieżki pliku css.

po prostu napisz w swoim pliku css jak poniżej

background:url("images/logo.jpg")