करता है: पहले img तत्वों पर काम नहीं करते?

Question

मैं :beforeएक छवि को दूसरी छवि पर रखने के लिए चयनकर्ता का उपयोग करने की कोशिश कर रहा हूं , लेकिन मुझे पता चल रहा है कि यह केवल एक imgतत्व से पहले एक छवि को रखने के लिए काम नहीं करता है , केवल कुछ अन्य तत्व। विशेष रूप से, मेरी शैली हैं:

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

और मुझे लगता है कि यह ठीक काम करता है:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

लेकिन यह नहीं है:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

मैं इसके बजाय एक तत्व divया pतत्व का उपयोग कर सकता हूं span, और ब्राउज़र imgतत्व में छवि पर मेरी छवि को सही ढंग से ओवरले करता है, लेकिन अगर मैं ओवरले वर्ग को imgखुद पर लागू करता हूं , तो यह काम नहीं करता है।

मैं यह काम करना चाहता हूं क्योंकि वह अतिरिक्त spanमुझे अपमानित करता है, लेकिन इससे भी महत्वपूर्ण बात यह है कि मुझे लगभग 100 ब्लॉग पोस्ट मिली हैं जिन्हें मैं संशोधित करना चाहता हूं, और मैं इसे एक बार में कर सकता हूं अगर मैं सिर्फ स्टाइलशीट को संशोधित कर सकता हूं, लेकिन अगर मुझे वापस जाना spanहै aऔर imgतत्वों और तत्वों के बीच एक अतिरिक्त तत्व जोड़ना है , तो यह बहुत अधिक काम होगा।

Comments

यह अजीब है, खासकर जब से सीएसएस मानक खुद का उपयोग करने का एक उदाहरण देता है: इससे पहले एक IMG तत्व के साथ ...

CSS

— chharvey

@ सच्चर्वे: यह सवाल इस एक के बाद पूछा गया था।

— जोशुआ फ्रैंक

Answer 1

दुर्भाग्य से, अधिकांश ब्राउज़र img टैग का उपयोग :afterया समर्थन नहीं करते हैं :before।

http://lildude.co.uk/after-css-property-for-img-tag

हालाँकि, आपके लिए जावास्क्रिप्ट / jQuery के साथ जो आवश्यक है, उसे पूरा करना संभव है। इस फिडेल को देखें:

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

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

जिस कारण से यह समर्थित नहीं है, उसके लिए कोरीवर्ड का उत्तर देखें ।

Comments

आपकी बेला गायब है। यह jsFiddle लिंक की सुंदरता है।

— रोको सी। बुल्जन

ठीक कर दिया। उसके लिए माफ़ करना।

— cwharris

यह उत्तर बताता नहीं है कि क्यों img पहले या बाद में नहीं हो सकता है। इसके अलावा, प्रस्तावित जावास्क्रिप्ट समाधान इसके लिए एक उचित प्रतिस्थापन नहीं है।

— जैस्पर केंस

प्रस्तावित समाधान हर परिदृश्य में काम करने की उम्मीद नहीं है। यह केवल एक उदाहरण है कि कोई समस्या को कैसे दरकिनार कर सकता है। यदि आप अधिक सामान्य समाधान प्रस्तावित करना चाहते हैं, तो उत्तर देने के लिए स्वतंत्र महसूस करें।

— cwharris

Answer 2

छद्म चयनकर्ताओं के पहले और बाद में HTML तत्व सम्मिलित नहीं हैं - वे लक्षित तत्व की मौजूदा सामग्री से पहले या बाद में पाठ सम्मिलित करते हैं। छवि तत्वों पाठ हो क्योंकि नहीं है या वंश है, न तो img:beforeया img:afterतो आप किसी भी अच्छा नहीं होगा। यही कारण है कि तत्वों के लिए भी मामला है <br>और <hr>उसी कारण से।

Comments

Img टैग स्पष्ट रूप से और स्वयं के तत्व हैं, और फिर भी हमें उन्हें पहले और बाद में psuedo-selectors के प्रयोग से अन्य तत्वों के साथ या बाद में डालने की अनुमति है। क्या यह सीएसएस कल्पना में नहीं है?

— cwharris

वह थोड़ा अलग है। आप एक छवि सम्मिलित कर सकते हैं, लेकिन छवि टैग का उपयोग नहीं कर रहे हैं - आपको content: url(/img/foo.jpg);सिंटैक्स का उपयोग करना होगा । विवरण के लिए w3.org/TR/CSS21/generate.html देखें ।

— coreyward

लघु सुधार: वे पीडो-तत्व सम्मिलित करते हैं, जो कि पाठ नोड्स की तरह तत्वों की तुलना में अधिक होते हैं।

— क्रिस कैलो

जेनरेट की गई सामग्री शैडो डोम का हिस्सा बन जाती है। वे नए तत्व, विशेषताएँ और पाठ नोड्स बहुत वास्तविक हैं। आप उन्हें क्रोम के इंस्पेक्टर में देख सकते हैं।

— मार्क डायथेल्म

@coreyward शायद आपको MDN (बदले हुए तत्व) पर

— मार्क डायथेल्म

Answer 3

मुझे शुद्ध सीएसएस में इस काम को करने का एक तरीका मिला:

मैं सिर्फ नकली सामग्री हूँ -method

img सक्षम करने के लिए एक शुद्ध सीएसएस विधि: के बाद।

आप कोड की जाँच कर सकते हैं : मैं सिर्फ नकली सामग्री हूँ या स्रोत देख सकता हूँ ।

स्रोत और स्निपेट

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

ब्राउज़र का समर्थन

+ क्रोम 10+

✓ फ़ायरफ़ॉक्स 11+

✓ ओपेरा 9.8+

✓ सफारी

समर्थन नहीं

⊗ इंटरनेट एक्सप्लोरर 8/9

कृपया अन्य ब्राउज़रों में परीक्षण करें

Comments

इसलिए मूल रूप से आप सिर्फ img टैग की शैली में सामग्री: "" जोड़ें और: पहले और बाद में काम करना शुरू करें। अच्छा लगा, मुझे आश्चर्य है कि यह कैसे क्रॉस-ब्राउज़र है।

— wtt 28:12

मैंने एक आइकन टेस्ट jsbin.com/esewow/edit#html,live सेट किया है और मैं पुष्टि कर सकता हूं कि यह IE8 पर काम नहीं करता है लेकिन क्रोम और सफारी पर यह ठीक काम करता है।

— w00t

कोडपैन उदाहरण केवल फ़ायरफ़ॉक्स में काम करता है अगर img टैग का src अमान्य है - जो कि उच्चतम विशेषता को एक तत्व के रूप में प्रदान करता है जो वास्तव में अनुमति देता है: पहले और बाद में। अगर img src मौजूद है, तो यह काम करना बंद कर देता है: codepen.io/anon/pen/EjtDu

— thenickdude

मुझे रोकें अगर मैं गलत हूं, लेकिन ऐसा लगता है कि यह अब क्रोम 46 के साथ काम नहीं करता है

— गयूम फॉक्स

img: इससे पहले और img: सफारी में काम नहीं करने के बाद । यह भी नहीं, जो शुरू में मुझे उत्साहित करता था। हालांकि अच्छी कोशिश।

— रेय बॉलिंग

Answer 4

<img>एक प्रतिस्थापित तत्व होने की प्रकृति के कारण , दस्तावेज़ स्टाइल ने इसे प्रभावित नहीं किया है।

वैसे भी इसका संदर्भ देने के लिए, <picture>एक आदर्श, देशी आवरण प्रदान करता है जिसमें छद्म तत्व हो सकते हैं, जैसे:

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>

Answer 5

:hover::afterप्रभाव को प्राप्त करने के लिए उपयोग करते समय इम्ग के लिए एक डिव कंटेनर का उपयोग करने का एक और उपाय यहां दिया गया है।

HTML इस प्रकार है:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

सीएसएस निम्नानुसार है:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

इसे कार्रवाई में देखने के लिए, मेरे द्वारा बनाई गई फ़ाइडल को देखें । बस आप जानते हैं कि यह क्रॉस ब्राउज़र फ्रेंडली है और 'नकली सामग्री' के साथ कोड को ट्रिक करने की कोई आवश्यकता नहीं है।

Comments

यह लागू display: inline-blockकरने के लिए उपयोगी है #img_container। यह सभी स्क्रीन आकारों में छवि के बराबर कंटेनर की चौड़ाई बना देगा। तो, आप :afterछवि के बाहर तैरने वाली सामग्री को समाप्त नहीं करते हैं ।

— बेनामी

Answer 6

मुझे लगता है कि यह काम क्यों नहीं करता है, यह देखने का सबसे अच्छा तरीका है: पहले और: अपनी सामग्री को उस टैग के भीतर या उसके बाद सामग्री डालने से पहले, जिस पर आप उन्हें लागू कर रहे हैं। तो यह divs या spans (या अधिकांश अन्य टैग) के साथ काम करता है क्योंकि आप उनके अंदर सामग्री डाल सकते हैं।

<div>
:before
Content
:after
</div>

हालाँकि, एक img एक स्व-निहित, स्व-समापन टैग है, और चूंकि इसका कोई अलग समापन टैग नहीं है, आप इसके अंदर कुछ भी नहीं डाल सकते। (यह देखने की जरूरत है <img>Content</img>, लेकिन निश्चित रूप से जो काम नहीं करता है।)

मुझे पता है कि यह एक पुराना विषय है, लेकिन यह पहले Google पर पॉप अप होता है, इसलिए उम्मीद है कि इससे दूसरों को सीखने में मदद मिलेगी।

Answer 7

यह एक मेरे लिए काम करता है:

एचटीएमएल

<ul>
    <li> name here </li>
</ul>

सीएसएस

ul li::before {
    content: url(../images/check.png);
}

Answer 8

छद्म तत्व :: के पहले और बाद में उत्पन्न होने वाले तत्व तत्व स्वरूपण बॉक्स द्वारा सम्‍मिलित हैं, और इस प्रकार बदले हुए तत्वों जैसे कि img, या br तत्वों पर लागू नहीं होते हैं।

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Answer 9

::after किसी छवि की फ़ालबैक छवि प्रदर्शित करने के लिए उपयोग किया जा सकता है

---

नीचे दिए गए उदाहरण को देखें, पहले 2 imgटैग टूटे हुए यूआरएल को इंगित करते हैं। लेकिन दूसरा एक ब्राउज़र से डिफ़ॉल्ट टूटे हुए लोगो के बजाय फ़ॉलबैक छवि को प्रदर्शित करता है। हालांकि, मुझे यकीन नहीं है कि यह किसी भी व्यावहारिक है, मुझे इसे सही तरीके से काम करने के लिए इस तरह की मुश्किल लगता है।

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

Answer 10

इस कोड को आज़माएं

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

Answer 11

मैंने कोशिश की और ऐसा करने के लिए एक सरल विधि मिली। यहाँ HTML है:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

मैंने जो किया वह <p>मेरी छवि टैग के बाद एक खाली टैग था । अब मैं चित्र का उपयोग करने से पहले p का उपयोग करूंगा और अपनी आवश्यकताओं के अनुसार स्थिति रखूंगा। यहाँ सीएसएस है:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

कोशिश करो।

Answer 12

कोशिश करें :: पिछले तत्व पर।

Comments

क्या आप अपनी पोस्ट को विस्तृत करेंगे?

— ज़मग