Posso usare un'immagine dal mio file system locale come sfondo in HTML?

Ho un documento HTML ospitato su un server Web remoto. Sto provando ad avere uno degli elementi sulla pagina web che usa un file immagine dal mio file system locale come immagine di sfondo. Nessuna fortuna con Chrome, Safari o Firefox (non ho provato IE).Posso usare un'immagine dal mio file system locale come sfondo in HTML?

Ecco un esempio di ciò che ho provato finora.

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

Se ispezionare l'elemento del corpo utilizzando lo strumento di controllo web del mio browser, e selezionare "Apri immagine in nuova scheda" l'immagine è lì. Quindi il browser è pienamente in grado di ottenere il file immagine utilizzando l'URL specificato.

È ciò che sto cercando di ottenere, o è una funzionalità di sicurezza del browser che tenta di bloccare i domini esterni dall'accesso alle risorse locali dell'utente?

fonte

2013-01-25 Johan Fredrik Varen

Perché sono voi che vogliono fare questo? Perché non caricare l'immagine sul tuo server web? Ad ogni modo, come fa il server a sapere a quale casella si trova il percorso del file? Hai bisogno di più di un semplice percorso locale a meno che il tuo sito non sia locale. Ha senso? Sono abbastanza sicuro che sia una cosa di sicurezza e non sono sicuro di come lo faresti funzionare ... o perché lo vorresti. Sembra che tu stia chiedendo dei guai. :-) – N1tr0

N1tr0: Per rispondere alla tua domanda, volevo creare un'alternativa a Pixel Perfect e simili estensioni browser overlay, in quanto mancano questi browser (ad esempio IE). Un elemento di caricamento file per scegliere un file immagine locale e poi alcuni JS per afferrarne il valore e creare una sovrapposizione. –

Per evitare un po 'di fastidio, suggerirei di caricare il file su un server. È facile dimenticarsi accidentalmente che si sta utilizzando un file locale come immagine di sfondo per il documento HTML e si cancella o sposta accidentalmente il file. – geoff

hai dimenticato il C: dopo che il file: ///
Questo funziona per me

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

fonte

2013-01-25 10:26:04 Roberto

Non c'è C in * nix;) –

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

Sembra è possibile fornire solo il nome dell'immagine locale, ammesso che sia nella stessa cartella ...

basta come:

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

fonte

2014-01-29 19:01:43 khess99

Jeff Bridgman è corretta. Tutto ciò di cui hai bisogno è
background: url ('pic.jpg')
e questo presuppone che l'immagine si trovi nella stessa cartella del tuo html.

Inoltre, la risposta di Roberto funziona correttamente. Testato su Firefox e IE. Grazie a Raptor per aggiungere la formattazione che visualizza l'immagine completa sullo schermo, e senza barre di scorrimento ... In una cartella f, sul desktop è presente html e un'immagine, pic.jpg, utilizzando l'ID utente. Fare quelle sostituzioni nel qui sotto:

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

fonte

2015-03-16 14:37:55 pollaris

testato anche su chrome e funzionante :) – Sep

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

questo dovrebbe aiutare

fonte

2015-10-25 03:06:55 Cjo

L'OP chiedeva come rendere il suo browser caricare HTML da un server remoto che fa riferimento a un file che si trova sul suo filesystem locale.Penso che il tuo suggerimento funzionerebbe solo se l'immagine fosse anche sul server remoto. – Dan

Posso usare un'immagine dal mio file system locale come sfondo in HTML?

risposta

Problemi correlati