CSS फ़ाइल में सापेक्ष URL का उपयोग करना, यह किस स्थान के सापेक्ष है?

Question

एक सीएसएस फ़ाइल में एक पृष्ठभूमि छवि URL की तरह कुछ परिभाषित करते समय, एक रिश्तेदार URL का उपयोग करते समय, यह कहाँ के सापेक्ष है? उदाहरण के लिए:

मान लीजिए कि फ़ाइल /stylesheets/base-styles.cssमें है:

div#header { 
    background-image: url('images/header-background.jpg');
}

अगर मैं के माध्यम से विभिन्न दस्तावेजों में इस स्टाइलशीट शामिल <link ... />सीएसएस फ़ाइल में सापेक्ष URL हो जाएगा स्टाइलशीट दस्तावेज़ के सापेक्ष में /stylesheets/या वर्तमान दस्तावेज़ के सापेक्ष यह करने के लिए शामिल है? संभावित रास्ते जैसे:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

Answer 1

W3 के अनुसार :

आंशिक URL की व्याख्या स्टाइल शीट के स्रोत के सापेक्ष की जाती है, दस्तावेज़ के सापेक्ष नहीं

इसलिए, आपके प्रश्न के उत्तर में, यह सापेक्ष होगा /stylesheets/।

यदि आप इस बारे में सोचते हैं, तो यह समझ में आता है, क्योंकि CSS फ़ाइल को विभिन्न निर्देशिकाओं में पृष्ठों में जोड़ा जा सकता है, इसलिए इसे CSS फ़ाइल में मानकीकृत करने का अर्थ है कि जहाँ भी स्टाइलशीट लिंक हैं, URL काम करेंगे।

Comments

ऐसा लगता है कि नियम का कोई अपवाद है: -ms-behaviorIE में :(

— pkyeck

एक और अपवाद है: जब यूआरएल एक कस्टम संपत्ति का डिफ़ॉल्ट मूल्य है। कहते हैं कि आप परिभाषित करते हैं .banner { background-image: var(--bgimg, url('images/default.jpg')); }, लेकिन --bgimgअभी तक एक मूल्य को परिभाषित नहीं करते हैं । फिर पृष्ठ पर /index.html, एक .bannerके लिए दिखेगा /images/default.jpg, लेकिन एक और पृष्ठ पर /about/index.htmlएक .bannerदिखेगा /about/images/default.jpg। बहुत टूटा हुआ IMO।

— छुरी

सुधार: ऊपर का डिफ़ॉल्ट मान बग क्रोम v60 में तय किया गया है।

— छारवे

यदि आपका सीएसएस एक बंडल में है तो रास्ता वास्तव में मायने नहीं रखता है। यह ऐसा नहीं है जहाँ आपको लगता है कि यह होने जा रहा है, कुछ भी सापेक्ष नहीं है।

— टॉड

गुणों का उपयोग करते समय मेरे पास समस्याएं थीं: background: var(--primary-color-background) no-repeat center center url("maps.jpg");यह आईओएस और सफारी में काम नहीं करता था। केवल पूर्ण पथ /resources/maps.jpgसफारी में एक सीएसएस संपत्ति के साथ मिलकर काम करता है।

— एंडी

Answer 2

यह CSS फ़ाइल के सापेक्ष है।

Answer 3

यह स्टाइलशीट के सापेक्ष है, लेकिन मैं आपके URL के सापेक्ष URL बनाने की सलाह दूंगा:

div#header { 
  background-image: url(/images/header-background.jpg);
}

इस तरह, आप भविष्य में उन्हें रिफैक्ट करने की आवश्यकता के बिना अपनी फ़ाइलों को इधर-उधर कर सकते हैं।

Comments

सामने आने पर अतिरिक्त "/" से क्या अंतर पड़ता है?

— केसबश

कमांड लाइन पर पथनाम की तरह, पथ के अग्र भाग पर स्थित / इसका मतलब है कि यह वर्तमान वेब सर्वर पर एक निरपेक्ष संसाधन की ओर इशारा करता है।

— डेविड डब्ल्यू कीथ

वास्तव में ऐसा मामला है जहां सीएसएस फ़ाइल के सापेक्ष यूआरआई का उपयोग करना बेहतर है। मेरे मामले में, मेरे पास एक निर्देशिका है "/ css /" जहां मैं सभी सीएसएस डेटा डालता हूं। अब, मैं एक अलग फ़ोल्डर में वेबसाइट पर नई सुविधाओं का परीक्षण करना चाहता हूं। यह परीक्षण करने के लिए कठिन हो जाता है, उदाहरण के लिए, परीक्षण फ़ोल्डर में नए पृष्ठभूमि चित्र। यह सब आपकी आवश्यकताओं पर निर्भर करता है ...

— डिएगो

निरपेक्ष रास्तों से डोमेन के सबफ़ोल्डर में समाधान डालना मुश्किल हो जाता है। कई कारण हैं कि आप सबफ़ोल्डर्स का समर्थन क्यों करना चाहते हैं। यह परीक्षण करना आसान बनाता है (जैसा कि डिएगो ने उल्लेख किया है) जहां आपके पास पिछले संस्करण / पूर्व-रिलीज हो सकते हैं जो ठेस के समान डोमेन पर स्थित हैं। भविष्य के परिवर्तन जहां कॉर्पोरेट प्रॉक्सी सर्वर एसएसओ का समर्थन करने के लिए स्थापित किए जाते हैं, सभी समाधानों को एक डोमेन पर ले जाना, आदि विशेष रूप से एसएसएल के साथ बनाए रखने के लिए कई डोमेन नामों के ओवरहेड से बचना चाह सकते हैं। मेरे लिए ये विचार "मेरे .css-file को स्थानांतरित करने में आसान" की तुलना में बहुत अधिक महत्वपूर्ण हैं।

— टेड हैंन्सन

छवियों और सामान की तरह है कि किसी भी रास्ते cdn जाता है तो यह एकदम सही है

— मुहम्मद उमर

Answer 4

मॉड्यूलर स्टाइल शीट बनाने के लिए जो किसी संसाधन के निरपेक्ष स्थान पर निर्भर नहीं हैं, लेखक रिश्तेदार यूआरआई का उपयोग कर सकते हैं। रिश्तेदार यूआरआई (जैसा कि [RFC3986] में परिभाषित किया गया है ) एक बेस यूआरआई का उपयोग करके पूर्ण यूआरआई के लिए हल किया जाता है। RFC 3986, धारा 5, इस प्रक्रिया के लिए मानक एल्गोरिथ्म को परिभाषित करता है। सीएसएस स्टाइल शीट के लिए, बेस यूआरआई स्टाइल शीट का है, स्रोत दस्तावेज़ का नहीं।

उदाहरण के लिए, मान लें कि निम्नलिखित नियम:

body { background: url("yellow") }

यूआरआई द्वारा नामित एक स्टाइल शीट में स्थित है:

http://www.example.org/style/basic.css

स्रोत दस्तावेज़ की BODY की पृष्ठभूमि को URI द्वारा निर्दिष्ट संसाधन द्वारा जो भी छवि वर्णित की गई है, उसके साथ टाई किया जाएगा

http://www.example.org/style/yellow

उपयोगकर्ता एजेंट भिन्न हो सकते हैं कि वे अमान्य URI या URI को कैसे संभालते हैं जो अनुपलब्ध या अनुपयुक्त संसाधनों को नामित करते हैं।

CSS 2.1 युक्ति से लिया गया ।

Answer 5

CSS स्टाइल शीट के लिए, बेस URI स्टाइल शीट का है, स्रोत स्रोत का नहीं।

(कुछ और तोड़ा जाएगा, IMNSHO)

Answer 6

एक मुद्दा जो उत्पन्न हो सकता है, और प्रतीत होता है कि यह ब्रेक है जब सीएसएस के ऑटो न्यूनतम का उपयोग किया जाता है। कीमा बनाया हुआ बंडल के लिए अनुरोध पथ में मूल सीएसएस की तुलना में एक अलग रास्ता हो सकता है। यह स्वचालित रूप से हो सकता है इसलिए यह भ्रम पैदा कर सकता है।

छोटा बंडल के लिए मैप किया गया अनुरोध पथ "/ originalcssfolder / minifiedbundlename" होना चाहिए न कि केवल "minifiedbundlename"।

दूसरे शब्दों में, मूल फ़ोल्डर संरचना के समान पथ (/ के साथ) के लिए अपने बंडलों को नाम दें, इस तरह किसी भी बाहरी संसाधन जैसे फ़ॉन्ट, चित्र ब्राउज़र द्वारा यूआरआई को सही करने के लिए मैप करेंगे। विकल्प पूर्ण url का उपयोग करना है (आपके सीएसएस में रेफल्स लेकिन यह आमतौर पर वांछनीय नहीं है।

Comments

इसने मुझे समय का भार बचाया! धन्यवाद। इसे और अधिक प्रलेखित किया जाना चाहिए

— mjbates7

Answer 7

इसने मेरे लिए काम किया। दो डॉट्स जोड़ने और स्लैश।

body{
    background: url(../images/yourimage.png);
}

Answer 8

प्रयोग करके देखें:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images आप जिस तस्वीर को पोस्ट करना चाहते हैं, उसे फोल्डर में रखना।