Czy mogę użyć obrazu z lokalnego systemu plików jako tła w HTML?

Mam dokument HTML przechowywany na zdalnym serwerze WWW. Próbuję jeden z elementów na stronie używać obrazu pliku z mojego lokalnego systemu plików jako obraz tła. Brak szczęścia w Chrome, Safari lub Firefox (nie próbowałem IE).Czy mogę użyć obrazu z lokalnego systemu plików jako tła w HTML?

Oto przykład tego, co próbowałem do tej pory.

<!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>

Jeśli sprawdzam element karoserii za pomocą przeglądarki internetowej w przeglądarce i zaznaczam opcję "Otwórz obraz w nowej karcie" obraz jest dostępny. Tak więc przeglądarka jest w pełni zdolna do uzyskania pliku obrazu za pomocą podanego adresu URL.

Czy to, co próbuję wykonać, jest możliwe, czy też jest to funkcja zabezpieczająca przeglądarki, która próbuje blokować domeny zewnętrzne przed dostępem do zasobów lokalnych użytkownika?

Źródło

2013-01-25 Johan Fredrik Varen

Dlaczego pan chce to zrobić? Dlaczego nie po prostu przesłać obraz na swój serwer WWW? W każdym razie, w jaki sposób serwer wie, w którym polu znajduje się lokalizacja pliku? Potrzebujesz więcej niż lokalnej ścieżki, chyba że Twoja strona jest lokalna. Ma sens? Jestem prawie pewny, że to jest kwestia bezpieczeństwa i nie jestem pewien, jak byś poszła o tym, żeby to działało .... lub dlaczego chcesz. Wygląda na to, że prosisz o kłopoty. :-) – N1tr0

N1tr0: Aby odpowiedzieć na twoje pytanie, chciałem stworzyć alternatywę dla Pixel Perfect i podobnych rozszerzeń przeglądarki nakładkowej, ponieważ kilka przeglądarek ich nie ma (na przykład IE). Element do przesłania pliku, aby wybrać lokalny plik obrazu, a następnie niektóre JS, aby pobrać jego wartość i utworzyć nakładkę. –

Aby zaoszczędzić sobie trochę bólu, sugerowałbym przesłanie pliku na serwer. Łatwo przypadkowo zapomnieć, że używasz lokalnego pliku jako obrazu tła dla dokumentu HTML i przypadkowo usunąć lub przenieść plik. – geoff

Zapomniałaś C: po file: ///
Działa to dla mnie

<!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>

Źródło

2013-01-25 10:26:04 Roberto

Nie ma C w * nix;) –

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

Wydaje można podać tylko nazwę lokalną obrazu, zakładając, że jest w tym samym folderze ...

wystarczy jak:

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

Źródło

2014-01-29 19:01:43 khess99

Jeff Bridgman jest poprawna. Wszystko czego potrzebujesz to:
background: url ('pic.jpg')
i to zakłada, że pic znajduje się w tym samym folderze co twój html.

Ponadto, odpowiedź Roberto działa dobrze. Testowane w Firefoksie i IE. Dzięki Raptor do dodawania formatowania, który wyświetla pełny obraz pasujący do ekranu, i bez pasków przewijania ... W folderze f na pulpicie znajduje się ten html i obraz, pic.jpg, używając twój identyfikator użytkownika. By te podstawienia w poniżej:

<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>

Źródło

2015-03-16 14:37:55 pollaris

testowane również na chrome i działało :) – Sep

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

to powinno pomóc

Źródło

2015-10-25 03:06:55 Cjo

OP pytał o to, jak sprawić, by jego przeglądarka ładowała HTML ze zdalnego serwera który odwołuje się do pliku znajdującego się w jego lokalnym systemie plików.Myślę, że Twoja sugestia działałaby tylko wtedy, gdyby obraz był również na serwerze zdalnym. – Dan

Czy mogę użyć obrazu z lokalnego systemu plików jako tła w HTML?

Odpowiedz

Powiązane problemy