Thư mục gốc CSS

Question

Tôi có một biểu định kiểu nơi tôi bao gồm hình nền.

background: url(../Images/myImage.png); 

vấn đề là, các trang từ các thư mục khác nhau sử dụng css này!

Tệp CSS của tôi nằm trong thư mục CSS, hình ảnh trong thư mục Hình ảnh và các trang html của tôi nằm trong nhiều thư mục khác nhau tùy thuộc vào nội dung và ý nghĩa của trang web.

Tất cả các trang của tôi kế thừa css này vì nó là chủ đề CHÍNH.

Đường dẫn được sử dụng trong ví dụ trên là đường dẫn tương đối. Và rõ ràng, con đường này chỉ hoạt động đối với một số trang. Tất cả tôi cần là để liên kết các hình ảnh trong css từ thư mục ROOT. Do đó mọi đường dẫn đều chính xác cho dù tệp ở đâu trong cấu trúc thư mục!

Tôi đã thử:

~/Images/myImage.png 
./Images/myImage.png 
/Images/myImage.png 
Images/myImages.png 

Tôi không nghĩ rằng một chọn thư mục gốc tồn tại ... nhưng tôi hy vọng nó:/

Answer 1

/Images/myImage.png 

này có được trong thư mục gốc của bạn miền/tên miền phụ

http://website.to/Images/myImage.png

và nó sẽ làm việc

Tuy nhiên, tôi nghĩ rằng nó sẽ làm việc như thế này, quá

• hình ảnh
  • yourimage.png
• phong cách
  • style.css

style.css:

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

Answer 2

Ví dụ thư mục của bạn là như thế này:

Desktop > 
     ProjectFolder > 
         index.html 
         css > 
          style.css 
         images > 
          img.png 

Bạn đang ở style.css của bạn và bạn muốn sử dụng img.png như một background-image , sử dụng điều này:

url("../images/img.png") 

Làm việc cho tôi!

Answer 3

Trong CSS tất cả các bạn phải làm là đặt url(logical path to the image file)

Answer 4

tôi sử dụng một giải pháp đường dẫn tương đối,

./../../../../../images/img .png

mọi ../ sẽ đưa bạn một thư mục hướng lên gốc. Hi vọng điêu nay co ich..

Answer 5

Sự cố này có nghĩa là liên kết "../" có nghĩa là bước lên (thư mục mẹ) "../images/img.png" sẽ không hoạt động vì khi bạn đang sử dụng ajax như dữ liệu chuyển đến trang web từ máy chủ.

Những gì bạn phải làm là chỉ vị trí hình ảnh để nhổ tận gốc với "./", sau đó vào thư mục thứ hai (trong trường hợp này thư mục thứ hai là 'hình ảnh')

url("./images/img.png") 

nếu bạn có thư mục như thế này

sau đó bạn sử dụng url("./content/images/img.png"), nhớ hình ảnh của bạn sẽ không hiển thị trong cửa sổ soạn thảo nhưng khi nó truyền cho các trình duyệt sử dụng ajax nó sẽ hiển thị.

Answer 6

nhấp here để được giải thích tốt!

Tất cả bạn cần biết về đường dẫn tập tin tương đối:

Bắt đầu với "/" trở về thư mục gốc và bắt đầu có

Bắt đầu với "../" di chuyển một thư mục ngược và bắt đầu có

bắt đầu với "../../" di chuyển hai thư mục lạc hậu và bắt đầu ở đó (và vân vân ...)

Để di chuyển về phía trước, chỉ cần bắt đầu với thư mục con đầu tiên và tiếp tục di chuyển về phía trước