Sử dụng URL tương đối trong tệp CSS, vị trí của nó có liên quan gì?

Khi xác định một cái gì đó như URL hình ảnh nền trong tệp CSS, khi sử dụng URL tương đối, nó có liên quan đến đâu? Ví dụ:

Giả sử tập tin /stylesheets/base-styles.csschứa:

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

Nếu tôi đưa biểu định kiểu này vào các tài liệu khác nhau thông qua <link ... />URL tương đối trong tệp CSS có liên quan đến tài liệu biểu định kiểu trong /stylesheets/hoặc liên quan đến tài liệu hiện tại thì nó được bao gồm không? Các đường dẫn có thể như:

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

Theo W3 :

URL một phần được diễn giải liên quan đến nguồn của biểu định kiểu, không liên quan đến tài liệu

Do đó, trong câu trả lời cho câu hỏi của bạn, nó sẽ liên quan đến /stylesheets/.

Nếu bạn nghĩ về điều này, điều này có ý nghĩa, vì tệp CSS có thể được thêm vào các trang trong các thư mục khác nhau, do đó, tiêu chuẩn hóa nó thành tệp CSS có nghĩa là các URL sẽ hoạt động ở bất cứ nơi nào các bảng định kiểu được liên kết.

Nó liên quan đến tệp CSS.

Nó liên quan đến biểu định kiểu, nhưng tôi khuyên bạn nên tạo các URL liên quan đến URL của bạn:

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

Bằng cách đó, bạn có thể di chuyển các tệp của mình xung quanh mà không cần phải cấu trúc lại chúng trong tương lai.

Để tạo các biểu định kiểu mô-đun không phụ thuộc vào vị trí tuyệt đối của tài nguyên, các tác giả có thể sử dụng các URI tương đối. Các URI tương đối (như được định nghĩa trong [RFC3986] ) được phân giải thành các URI đầy đủ bằng cách sử dụng URI cơ sở. RFC 3986, phần 5, định nghĩa thuật toán quy chuẩn cho quy trình này. Đối với biểu định kiểu CSS, URI cơ sở là biểu định kiểu chứ không phải của tài liệu nguồn.

Ví dụ: giả sử quy tắc sau:

body { background: url("yellow") }

được đặt trong một biểu định kiểu được chỉ định bởi URI:

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

Nền của BODY của tài liệu nguồn sẽ được lát bằng bất kỳ hình ảnh nào được mô tả bởi tài nguyên được chỉ định bởi URI

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

Tác nhân người dùng có thể khác nhau về cách họ xử lý các URI hoặc URI không hợp lệ chỉ định các tài nguyên không có sẵn hoặc không thể áp dụng.

Lấy từ thông số CSS 2.1 .

Đối với biểu định kiểu CSS, URI cơ sở là biểu định kiểu chứ không phải của tài liệu nguồn.

(Bất cứ điều gì khác sẽ bị phá vỡ, IMNSHO)

Một vấn đề có thể xảy ra và dường như phá vỡ điều này là khi sử dụng tự động giảm thiểu css. Đường dẫn yêu cầu cho gói được rút gọn có thể có đường dẫn khác với css ban đầu. Điều này có thể xảy ra tự động để nó có thể gây nhầm lẫn.

Đường dẫn yêu cầu được ánh xạ cho gói được rút gọn phải là "/ originalcssfolder / minifiedbundlename" chứ không chỉ là "minifiedbundlename".

Nói cách khác, đặt tên cho các gói của bạn có cùng đường dẫn (với /) là cấu trúc thư mục gốc, theo cách này, bất kỳ tài nguyên bên ngoài nào như phông chữ, hình ảnh sẽ ánh xạ để sửa URI của trình duyệt. Cách khác là sử dụng url tuyệt đối (refs trong css của bạn nhưng điều đó thường không được mong muốn.

Điều này làm việc cho tôi. thêm hai dấu chấm và dấu gạch chéo.

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

Hãy thử sử dụng:

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

Images là thư mục giữ hình ảnh mà bạn muốn đăng.