Używając względnego adresu URL w pliku CSS, do jakiej lokalizacji się odnosi?

Kiedy definiujesz coś w rodzaju adresu URL obrazu tła w pliku CSS, kiedy używasz względnego adresu URL, gdzie jest on względny? Na przykład:

Załóżmy, że plik /stylesheets/base-styles.csszawiera:

div#header { 
    background-image: url('images/header-background.jpg');
}

Gdybym to arkusz stylów do różnych dokumentów za pośrednictwem <link ... />będzie względny adres URL w pliku CSS być w stosunku do dokumentu arkusza stylów w /stylesheets/lub w stosunku do bieżącego dokumentu to jest wliczone do? Możliwe ścieżki takie jak:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

Według W3 :

Częściowe adresy URL są interpretowane względem źródła arkusza stylów, a nie względem dokumentu

Dlatego w odpowiedzi na twoje pytanie będzie ono względne /stylesheets/.

Jeśli się nad tym zastanowić, ma to sens, ponieważ plik CSS można dodać do stron w różnych katalogach, więc standaryzacja go do pliku CSS oznacza, że ​​adresy URL będą działać wszędzie tam, gdzie połączone są arkusze stylów.

Jest względny w stosunku do pliku CSS.

Jest względny w stosunku do arkusza stylów, ale zalecam, aby adresy URL były względne w stosunku do adresu URL:

div#header { 
  background-image: url(/images/header-background.jpg);
}

W ten sposób możesz przenosić swoje pliki bez konieczności ich refaktoryzacji w przyszłości.

Aby utworzyć modułowe arkusze stylów, które nie są zależne od bezwzględnej lokalizacji zasobu, autorzy mogą użyć względnych identyfikatorów URI. Względne identyfikatory URI (zgodnie z definicją w [RFC3986] ) są rozwiązywane do pełnych identyfikatorów URI przy użyciu podstawowego identyfikatora URI. RFC 3986, sekcja 5, określa algorytm normatywny dla tego procesu. W przypadku arkuszy stylów CSS podstawowym identyfikatorem URI jest arkusz stylów, a nie dokumentu źródłowego.

Załóżmy na przykład następującą zasadę:

body { background: url("yellow") }

znajduje się w arkuszu stylów wyznaczonym przez URI:

http://www.example.org/style/basic.css

Tło BODY dokumentu źródłowego zostanie sąsiadująco z dowolnym obrazem opisanym przez zasób wskazany przez URI

http://www.example.org/style/yellow

Programy klienckie mogą różnić się sposobem obsługi niepoprawnych identyfikatorów URI lub identyfikatorów URI oznaczających niedostępne lub niemożliwe do zastosowania zasoby.

Na podstawie specyfikacji CSS 2.1 .

W przypadku arkuszy stylów CSS podstawowym identyfikatorem URI jest arkusz stylów, a nie dokumentu źródłowego.

(Wszystko inne byłoby zepsute, IMNSHO)

Jednym z problemów, który może wystąpić i pozornie zepsuć, jest użycie automatycznej minimalizacji css. Ścieżka żądania dla zminimalizowanego pakietu może mieć inną ścieżkę niż oryginalny css. Może się to zdarzyć automatycznie, więc może powodować zamieszanie.

Ścieżka zmapowanego żądania dla zminimalizowanego pakietu powinna mieć postać „/ originalcssfolder / minifiedbundlename”, a nie tylko „minifiedbundlename”.

Innymi słowy, nazwij swoje pakiety, aby miały tę samą ścieżkę (z /) co oryginalna struktura folderów, w ten sposób wszelkie zasoby zewnętrzne, takie jak czcionki, obrazy będą mapowane do poprawnych identyfikatorów URI przez przeglądarkę. Alternatywą jest użycie bezwzględnego adresu URL (referencje w css, ale zwykle nie jest to pożądane.

To zadziałało dla mnie. dodając dwie kropki i ukośnik.

body{
    background: url(../images/yourimage.png);
}

Spróbuj użyć:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images będący folderem zawierającym zdjęcie, które chcesz opublikować.