Câu hỏi Làm cách nào để liên kết đến một hình ảnh tĩnh bên trong tệp css?


newb đến pyramid và python. Tôi đã có thể liên kết đến các tệp tĩnh của tôi thành công trong bất kỳ mẫu jinja2 nào của tôi, tức là:

<link rel="stylesheet" type="text/css" href="{{'myproject:static/mycss.css'|static_url}}"></link>

Các tập tin .css tải tốt và tôi có thể liên kết đến bất kỳ hình ảnh được bên trong thư mục tĩnh của tôi miễn là tôi làm điều đó trong khuôn mẫu jinja.

Tôi muốn sử dụng hình ảnh làm nền nhưng gặp sự cố khi liên kết tới hình ảnh trong tệp css của mình:

#mydiv{
background-image:url("{{'myproject:static/myimage.gif'|static_url}}");
}

Liên kết này hiển thị trong mycss.css dưới dạng

"{{'myproject:static/myimage.gif'|static_url}}" 

và không hiển thị dưới dạng liên kết. (nếu tôi tải một hình ảnh được lưu trữ bên ngoài làm hình nền của tôi thì nó hoạt động)

cám ơn!


7
2017-09-25 16:24


gốc




Các câu trả lời:


Tệp CSS của bạn là một tệp tĩnh và do đó là không phải được coi là mẫu. Tất cả các tài nguyên tĩnh được phục vụ như là, mà không cần xử lý.

Tất cả các URL không tuyệt đối trong tệp CSS có liên quan đến vị trí từ nơi tệp CSS đã được tải; nếu bạn dùng background-image:url("myimage.gif"), trình duyệt tải hình ảnh liên quan đến vị trí tệp CSS của bạn. Vì CSS đã được tải từ http://yoursite/static/mycss.css, hình ảnh sẽ được tải từ http://yoursite/static/myimage.gif.

Ngoài ra, nếu bạn tham chiếu tệp từ các vị trí bất thường (ví dụ: hình ảnh được tạo tự động theo một trong các chế độ xem của bạn), bạn sẽ phải thêm tệp CSS của mình làm chế độ xem thay thế và hiển thị tệp đó bằng mẫu (văn bản).


11
2017-09-25 16:26



được. cám ơn! Tôi sẽ chấp nhận câu trả lời khi SO cho phép tôi. - Marissa Levy
Tôi trung thành. Bạn trả lời đầu tiên và nó hoạt động. Bạn đã rất hữu ích và tôi đánh giá cao nó. - Marissa Levy
@MartijnPieters: Tôi đã chỉnh sửa câu trả lời của bạn để trao đổi các tùy chọn, vì câu trả lời "chỉ sử dụng url tương đối" là chính xác cho 99,5% của tất cả các trường hợp và - Sergey