उपयोग करना: छवि को मोडल में जोड़ने के लिए सीएसएस छद्म तत्व से पहले

Question

मेरे पास एक सीएसएस क्लास है Modalजो बिल्कुल तैनात है, इसके अभिभावकों के ऊपर z-अनुक्रमित है, और अच्छी तरह से JQuery के साथ तैनात है। मैं मोडल बॉक्स के शीर्ष पर एक कैरेट छवि (^) जोड़ना चाहता हूं और :beforeइसे साफ-सफाई करने के लिए CSS छद्म चयनकर्ता का उपयोग कर रहा था ।

छवि को मोडल के ऊपर पूरी तरह से स्थित और z-indexed करने की आवश्यकता है, लेकिन मुझे contentविशेषता में छवि में उपयुक्त वर्ग जोड़ने का कोई तरीका नहीं मिला है :

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

दूसरा सबसे अच्छा विकल्प- क्या मैं सामग्री विशेषता में शैलियों को इनलाइन जोड़ सकता हूं?

Answer 1

http://caniuse.com/#search=:after

:afterऔर :beforeसाथ contentके रूप में वे हर प्रमुख इंटरनेट एक्सप्लोरर के अलावा अन्य ब्राउज़र में कम से कम 5 संस्करणों वापस समर्थित रहे हैं का उपयोग करना उचित नहीं है। Internet Explorer में संस्करण 9+ में पूर्ण समर्थन और संस्करण 8 में आंशिक समर्थन है।

क्या यह आप देख रहे हैं?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

यदि नहीं, तो क्या आप थोड़ा बेहतर समझा सकते हैं?

या आप jQuery का उपयोग कर सकते हैं, जैसे कि यहोशू ने कहा:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

Comments

यह। ब्राउज़र संगतता के बारे में यहोशू की बात भी सही है, हालांकि- IE8 में छवि को प्रस्तुत किया गया है: सामग्री के बाद, लेकिन इसके कुछ हिस्सों को प्रस्तुत नहीं करेगा जो माता-पिता की सीमा के बाहर हैं।

— RSG

अब (2017 में), IE 11 Microsoft द्वारा समर्थित IE का एकमात्र संस्करण है; इसलिए, IE8 संगतता के बारे में चिंता करने की कोई बात नहीं है। साथ ही, CSS समाधान jQuery समाधान की तुलना में लगभग हमेशा बेहतर होता है क्योंकि वे बहुत तेज़ी से लोड होते हैं और jQuery पृष्ठ को लोड होने के बाद आपके लेआउट को फिर से लिखकर स्क्रीन फ़्लिकर का कारण बन सकता है।

— नोसाजिमिकी

@Nosajimiki पुराने ब्राउज़र के बारे में चिंता करना चाहिए या नहीं, यह ज्यादातर आपके आगंतुकों पर निर्भर करता है।

— जोस फेटी

Answer 2

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

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

Comments

सुझाव के लिए धन्यवाद- मोडल की एक सीमा होती है इसलिए मुझे नहीं लगता कि मैं पृष्ठभूमि छवि का उपयोग कर सकते हैं ताकि जरूरत के अनुसार सीमा / बीजी रंग के ऊपर गाजर छवि को स्थिति में लाया जा सके।

— आरएसजी

क्यों नहीं? यदि आप उस छद्म तत्व को बिल्कुल स्थिति में रखते हैं, तो आप उसे हाशिये पर ले जा सकते हैं। यह अन्य तत्व सीमाओं और / या बीजी रंग के शीर्ष पर खींचा जाएगा।

— जोस फेटी

पृष्ठभूमि छवि div की सीमा के बाहर नहीं बढ़ सकती है?

— RSG

आपको संभवतः एक सामग्री जोड़ने की आवश्यकता है: ''; इसे प्रदर्शित करने के लिए

— विल्स्टर

Answer 3

1. यह आपकी समस्या के लिए मेरा जवाब है।

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}

Comments

मैंने background-size: 33px 16px; background-repeat: no-repeat;छवि को स्केल करने के लिए जोड़ा !

— हस्से ब्योर्क

Answer 4

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

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

Comments

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

— आरएसजी

यहां तक ​​कि सीएसएस 3 में भारी मात्रा में उपयोग की जाने वाली सामग्री के साथ, मैंने जो देखा है, वह अभी भी उनमें से एक है जो पूरी तरह से कहीं भी समर्थित नहीं है। मेरा मानना ​​है कि यह बुरी चीजों को इंजेक्ट करने में सक्षम होने के कुछ डर के साथ करना है। इसके अलावा, मेरा मानना ​​है कि सामग्री को इंजेक्ट करने के लिए पहले से मौजूद तत्व की आवश्यकता है - यह सुनिश्चित करने के लिए नहीं कि मैं DOM को हेरफेर कर सकता हूं कि यह अपने आप में कितना है।

— जोशुआ

यह उत्तर गलत है कि इसके ब्राउज़र में अविश्वसनीय समर्थन है। Contentऔर after/beforeहर एक प्रमुख ब्राउज़र पर बहुत विश्वसनीय है, यह ie8 के बाद से काम किया है, कम से कम FF3.5, कम से कम क्रोम 9, कम से कम ओपेरा 10.6, कम से कम सफारी 3.2, आईओएस सफारी के हर संस्करण, ओपेरा मिनी के हर संस्करण, हर संस्करण ओपेरा मोबाइल का, और कभी Android ब्राउज़र का संस्करण। यदि आप जानते हैं कि अगर कुछ क्रॉस-ब्राउज़र समर्थित है, तो देखें: caniuse.com/#search=:after

— android.nick

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

— जोशुआ

असल में, आप के साथ बेहतर बंद कर रहे हैं CSSसे अधिक JavaScriptइस पर। कोई फर्क नहीं पड़ता कि ब्राउज़र कितना खून बह रहा है, उपयोगकर्ता अभी भी JavaScriptअक्षम हो सकता है ... सौभाग्य से इस मामले में :beforeऔर :afterचयनकर्ताओं को व्यापक रूप से समर्थन किया जाता है; quirksmode.org/css/selectors

— स्टीव बुज़ोनास