क्या मैं एचटीएमएल में पृष्ठभूमि के रूप में अपने स्थानीय फाइल सिस्टम से एक छवि का उपयोग कर सकता हूं?

मुझे एक दूरस्थ वेब सर्वर पर होस्ट किया गया एक HTML दस्तावेज़ मिला है। मैं वेब पेज पर मौजूद तत्वों में से एक को अपने स्थानीय फाइल सिस्टम से अपनी पृष्ठभूमि छवि के रूप में एक छवि फ़ाइल का उपयोग करने की कोशिश कर रहा हूं। क्रोम, सफारी या फ़ायरफ़ॉक्स के साथ कोई भाग्य नहीं है (आईई की कोशिश नहीं की है)।क्या मैं एचटीएमएल में पृष्ठभूमि के रूप में अपने स्थानीय फाइल सिस्टम से एक छवि का उपयोग कर सकता हूं?

यहां मैंने जो भी प्रयास किया है उसका एक उदाहरण यहां दिया गया है।

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

अगर मैं अपने ब्राउज़र की वेब निरीक्षण उपकरण का उपयोग कर शरीर तत्व का निरीक्षण करें और "नए टैब में खोलें छवि" छवि नहीं है। तो ब्राउज़र दिए गए यूआरएल का उपयोग कर छवि फाइल पर पूरी तरह से सक्षम है।

क्या मैं संभवतः खींचने की कोशिश कर रहा हूं, या क्या यह बाहरी डोमेन को उपयोगकर्ता के स्थानीय संसाधनों तक पहुंचने से रोकने के लिए ब्राउज़र की एक सुरक्षा सुविधा है?

स्रोत

2013-01-25 Johan Fredrik Varen

क्यों आप ऐसा करना चाहते हैं? क्यों न केवल छवि को अपने वेबसर्वर पर अपलोड करें? वैसे भी, सर्वर कैसे पता लगाता है कि फ़ाइल स्थान किस बॉक्स पर है? जब तक आपकी साइट स्थानीय न हो, आपको केवल स्थानीय पथ से अधिक की आवश्यकता होती है। सही बात? मुझे पूरा यकीन है कि यह एक सुरक्षा चीज है और मुझे यकीन नहीं है कि आप इसे कैसे काम करने के बारे में जानेंगे .... या आप क्यों चाहेंगे। ऐसा लगता है कि आप परेशानी के लिए पूछ रहे हैं। :-) – N1tr0

N1tr0: अपने प्रश्न का उत्तर देने के लिए, मैं पिक्सेल परफेक्ट और समान ओवरले ब्राउज़र एक्सटेंशन का विकल्प बनाना चाहता था, क्योंकि कई ब्राउज़रों में कमी आई है (उदाहरण के लिए, आईई)। एक स्थानीय छवि फ़ाइल लेने के लिए एक फ़ाइल अपलोड तत्व और फिर कुछ जेएस इसके मूल्य को पकड़ने और ओवरले बनाने के लिए। –

अपने आप को कुछ दर्द बचाने के लिए, मैं एक सर्वर को फ़ाइल अपलोड करने का सुझाव दूंगा। गलती से भूलना आसान है कि आप अपने HTML दस्तावेज़ के लिए पृष्ठभूमि-छवि के रूप में स्थानीय फ़ाइल का उपयोग कर रहे हैं, और गलती से फ़ाइल को हटा या स्थानांतरित कर सकते हैं। – geoff

आप सी भूल गया: फ़ाइल के बाद: ///
यह मैं

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

स्रोत

2013-01-25 10:26:04 Roberto

* सी में कोई सी नहीं है;) –

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

लिए काम करता है ऐसा लगता है तुम सिर्फ स्थानीय छवि नाम प्रदान कर सकते हैं, यह मानते हुए यह एक ही फ़ोल्डर में है ...

यह पर्याप्त होता की तरह:

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

स्रोत

2014-01-29 19:01:43 khess99

जेफ Bridgman सही है। आपको केवल
पृष्ठभूमि: url ('pic.jpg')
और यह मानता है कि तस्वीर आपके HTML के समान फ़ोल्डर में है।

इसके अलावा, रॉबर्टो का जवाब ठीक काम करता है। फ़ायरफ़ॉक्स, और आईई में परीक्षण किया। प्रारूपण जोड़ने के लिए रैप्टर जो स्क्रीन पर पूर्ण चित्र फिट करने के लिए उपयुक्त है, और स्क्रॉलबार के बिना ... डेस्कटॉप फ़ोल्डर में, डेस्कटॉप पर यह HTML और चित्र है, pic.jpg, आपके उपयोगकर्ता आईडी का उपयोग कर। नीचे में उन लोगों के प्रतिस्थापन बनाओ:

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

स्रोत

2015-03-16 14:37:55 pollaris

क्रोम पर भी परीक्षण किया गया और काम किया :) – Sep

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

इस मदद करनी चाहिए

स्रोत

2015-10-25 03:06:55 Cjo

ओपी अपने ब्राउजर को रिमोट सर्वर से एचटीएमएल लोड करने के तरीके के बारे में पूछ रहा था जो एक फाइल को संदर्भित करता है जो उसके स्थानीय फाइल सिस्टम पर है।मुझे लगता है कि आपका सुझाव केवल तभी काम करेगा जब छवि रिमोट सर्वर पर भी थी। – Dan

क्या मैं एचटीएमएल में पृष्ठभूमि के रूप में अपने स्थानीय फाइल सिस्टम से एक छवि का उपयोग कर सकता हूं?

उत्तर

संबंधित मुद्दे