div

Question

युक्त सीमा के बाहर पृष्ठभूमि छवि रखें, मैं वास्तविक छवि div के बाहर होने के लिए पृष्ठभूमि छवि सेट करने का प्रयास कर रहा हूं।

<div class="expandable">Show Details</div> 

.expandable 
{ 
    background: transparent url('./images/expand.gif') no-repeat -20px 0px; 
} 

इसलिए "विस्तार" छवि मूल रूप से div के बाईं ओर दिखाई देनी चाहिए।

मुझे यह काम नहीं मिल रहा है, यह छवि कंटेनर की सीमाओं के बाहर स्थित होने पर नहीं दिखाती है। मुझे यकीन नहीं है कि कोई सीएसएस चाल है जो मुझे याद आ रही है, या यदि यह मेरे पेज लेआउट के साथ कुछ करने के लिए है ("विस्तार योग्य" div कई अन्य divs के अंदर घोंसला है)।

क्या ऐसा करना संभव है? कोई संकेत?

संपादित करें: link

Answer 1

आप एक अलग तत्व के अंदर पृष्ठभूमि छवि डाल करने के लिए करने जा रहे हैं: यहाँ है एक jsFiddle समस्या को दर्शाता है। पृष्ठभूमि छवि की स्थिति उस तत्व के बाहर छवि को नहीं रख सकती है जिस पर वे लागू होते हैं।

संपादित करें आपका प्रश्न मेरी याददाश्त को जॉग किया गया और मैं गया और सीएसएस चश्मे की जांच की। वास्तव में एक "पृष्ठभूमि-अनुलग्नक" सीएसएस विशेषता है जिसे आप सेट कर सकते हैं, जो तत्व के बजाय व्यूपोर्ट पर पृष्ठभूमि को एंकर करता है। हालांकि, यह गाड़ी या IE में टूट, जिसके कारण मैं गया है मिल गया यह "का उपयोग नहीं करते" शेल्फ पर मेरे सिर में बैठे :-)

संपादित — ध्यान दें कि यह जवाब 2010 से है, और नए (और, अधिक महत्वपूर्ण रूप से, व्यापक रूप से समर्थित) सीएसएस क्षमताओं 2016 में मौजूद हैं।

Answer 2

आप यह नहीं कर सकते कि आप वास्तव में कैसे करना चाहते हैं, लेकिन एक सरल सीधा समाधान है।

<div class="expandable">Show Details<div class="expandable-image"></div></div> 

फिर अपने सीएसएस कुछ ऐसा दिखाई देगा:: आप .expandable तरह के अंदर एक और div डाल सकते हैं

.expandable{ position:relative; } 
.expandable-image{ 
    position:absolute; top:0px; left:-20px; 
    width:<width>px; height:<height>px; 
    background: url('./images/expand.gif') no-repeat; 
} 

Answer 3

अपनी स्थिति के विवरण के आधार पर आप CSS3 के border-image-* rules के साथ भाग प्राप्त करने में सक्षम हो सकता है । उदाहरण के लिए, मैंने उन्हें yii में एक CGridView विजेट की फ़िल्टर पंक्ति में "डमी खोज बटन" को प्रभावी ढंग से उपयोग करने के लिए उपयोग किया (फ़िल्टर के इनपुट बॉक्स के बाहर कहीं भी क्लिक करके AJAX कॉल ट्रिगर करेगा, लेकिन ये "बटन" उपयोगकर्ता को कुछ अंतर्ज्ञानी)। सीजीआईडी ​​कॉलम विजेट को उपरोक्त करने के लिए मेरे लिए यह उचित नहीं था कि एचटीएमएल को इसके प्रस्तुत करने में एचटीएमएल हैक करने के लिए फ़िल्टर करें() विधि * - मैं एक शुद्ध सीएसएस समाधान चाहता था।

.myclass .grid-view .items { 
    border-collapse: separate ; 
    } 

    .myclass .grid-view .filters td + td { 
    border-image-source: url("/path/to/my/img_32x32.png"); 
    border-image-slice: 0 0 0 100%; 
    border-image-width: 0 0 0 32; 
    border-image-outset: 0 0 0 40px; 
    border-width: 1px; 
    } 

    .myclass .grid-view .filters input { 
    width: 80%; 
    } 

वहाँ सीमा छवि चौड़ाई मूल्यों में शामिल एक चाल का एक छोटा सा है - कि 32 एक गुणक नहीं लंबाई (नहीं पिक्सल रखूँ) सीमा-चौड़ाई में प्रयोग किया जाता है इकाई की (यानी 1 पीएक्स)। नतीजा ग्रिडव्यू के पहले एन -1 कॉलम में नकली बटन है। मेरे मामले में, मुझे अंतिम कॉलम में कुछ भी चाहिए नहीं क्योंकि यह एक सीबीटन्स कॉलम है जिसमें फ़िल्टर बॉक्स नहीं है। वैसे भी, मुझे आशा है कि इससे लोगों को शुद्ध सीएसएस समाधान और # x1F600 की तलाश करने में मदद मिलेगी; :- डी

* इसे लिखने के कुछ देर बाद, मैंने पाया कि मैं केवल CGridColumn बनाने के लिए उपयोग की जाने वाली सरणी की 'फ़िल्टर' संपत्ति में एक छवि के लिए कोड को जोड़ सकता हूं, इसलिए मेरा तर्क मंथन हो जाता है। इसके अलावा वहां एक मुद्दा है (फ़ायरफ़ॉक्स में, वैसे भी) सीमा-छवि-दोहराने के साथ अंतरिक्ष निर्दिष्ट होने पर भी फैलाने के लिए मजबूर होना पड़ता है।फिर भी, शायद यह किसी के लिए आसान हो सकता है & # x1F615; : - \

Answer 4

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

.class:before { 
    content: ""; 
    display: inline-block; 
    width: {width of background img}; 
    height: {height of background img}; 
    background-image: url("/path/to/img.png"); 
    background-repeat: no-repeat; 
    position: relative; 
    left: -5px; //adjust your positioning as necessary 
}