Tôi có thể sử dụng hình ảnh từ hệ thống tệp cục bộ của mình làm nền trong HTML không?

Tôi đã có tài liệu HTML được lưu trữ trên máy chủ web từ xa. Tôi đang cố gắng để có một trong những yếu tố trên trang web sử dụng một tập tin hình ảnh từ hệ thống tập tin địa phương của tôi như là hình nền của nó. Không may mắn với Chrome, Safari hoặc Firefox (chưa thử IE).Tôi có thể sử dụng hình ảnh từ hệ thống tệp cục bộ của mình làm nền trong HTML không?

Dưới đây là ví dụ về những gì tôi đã thử cho đến thời điểm này.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Experiment</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <style> 
      html,body { width: 100%; height: 100%; } 
     </style> 
    </head> 
    <body style="background: url('file:///Users/username/Desktop/background.png')"> 
    </body> 
</html>

Nếu tôi kiểm tra phần tử cơ thể bằng công cụ kiểm tra web của trình duyệt của tôi và chọn "Mở hình ảnh trong tab mới", hình ảnh ở đó. Vì vậy, trình duyệt hoàn toàn có khả năng nhận được tệp hình ảnh bằng cách sử dụng URL đã cho.

Là những gì tôi đang cố gắng hết sức, hoặc đây có phải là tính năng bảo mật của trình duyệt đang cố chặn các miền bên ngoài truy cập tài nguyên cục bộ của người dùng không?

Nguồn

2013-01-25 Johan Fredrik Varen

Tại sao bạn muốn làm điều này? Tại sao không chỉ tải hình ảnh lên máy chủ web của bạn? Dù sao, làm thế nào để máy chủ biết vị trí tập tin hộp là gì? Bạn cần nhiều hơn chỉ là một con đường địa phương, trừ khi trang web của bạn là địa phương. Có lý? Tôi khá chắc chắn đó là một điều bảo mật và tôi không chắc chắn làm thế nào bạn sẽ đi về làm cho nó hoạt động .... hoặc lý do tại sao bạn sẽ muốn. Có vẻ như bạn đang yêu cầu rắc rối. :-) – N1tr0

N1tr0: Để trả lời câu hỏi của bạn, tôi muốn tạo một giải pháp thay thế cho Pixel Perfect và các tiện ích mở rộng lớp phủ tương tự, vì một số trình duyệt thiếu các trình duyệt này (ví dụ: IE). Một phần tử tải lên tệp để chọn tệp hình ảnh cục bộ và sau đó một số JS lấy giá trị của nó và tạo lớp phủ. –

Để tiết kiệm cho mình một số cơn đau, tôi khuyên bạn nên tải tệp lên máy chủ. Thật dễ dàng để vô tình quên rằng bạn đang sử dụng tệp cục bộ làm hình nền cho tài liệu HTML của mình và vô tình xóa hoặc di chuyển tệp. – geoff

Bạn quên C: sau khi file: ///
này làm việc cho tôi

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Experiment</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <style> 
      html,body { width: 100%; height: 100%; } 
     </style> 
    </head> 
    <body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')"> 
    </body> 
</html>

Nguồn

2013-01-25 10:26:04 Roberto

Không có C trong * nix;) –

http://kb.mozillazine.org/Links_to_local_pages_don't_work – Roberto

Có vẻ như bạn có thể cung cấp chỉ là tên hình ảnh địa phương, giả sử nó là trong cùng một thư mục ...

Nó cũng đủ như:

background-image: url("img1.png")

Nguồn

2014-01-29 19:01:43 khess99

Jeff Bridgman là đúng. Tất cả bạn cần là
nền: url ('pic.jpg')
và điều này giả định rằng pic nằm trong cùng thư mục với html của bạn.

Ngoài ra, câu trả lời của Roberto hoạt động tốt. Thử nghiệm trong Firefox và IE. Nhờ có Raptor để thêm định dạng hiển thị hình ảnh đầy đủ vừa với màn hình, và không có thanh cuộn ... Trong thư mục f, trên màn hình là html và ảnh, pic.jpg, sử dụng userid của bạn. Làm cho những thay ở dưới đây:

<html> 
<head> 
    <style> 
     body { 

     background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed; 

     background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */ 
     -webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */ 
     -moz-background-size: cover; /* optional for Firefox 3.6 */ 
     -o-background-size: cover; /* for Opera 9.5 */ 
     margin: 0; /* to remove the default white margin of body */ 
     padding: 0; /* to remove the default white margin of body */ 
     overflow: hidden; 
      } 
    </style> 
</head> 
<body> 
hello 
</body> 
</html>

Nguồn

2015-03-16 14:37:55 pollaris

thử nghiệm trên chrome quá và làm việc :) – Sep

background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

này sẽ giúp

Nguồn

2015-10-25 03:06:55 Cjo

OP đã hỏi về cách làm cho trình duyệt của anh tải HTML từ máy chủ từ xa tham chiếu đến tệp trên hệ thống tệp cục bộ của anh ấy.Tôi nghĩ đề xuất của bạn sẽ chỉ hoạt động nếu hình ảnh cũng nằm trên máy chủ từ xa. – Dan

Tôi có thể sử dụng hình ảnh từ hệ thống tệp cục bộ của mình làm nền trong HTML không?

Trả lời

Các vấn đề liên quan