: छवियों

साथ छद्म वर्ग शामिल नहीं है काम करता है इससे पहले कि मैं एचटीएमएल निम्नलिखित है:: छवियों

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>:before pseudo-class and images</title> 
    <style type="text/css" media="screen"> 
     img { 
      display: block; 
      width: 640pt; 
     } 
     img:before { 
      content: "Test"; 
     } 
    </style> 
</head> 
<body> 
    <img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" /> 
</body> 
</html>

: से पहले छवि को दिखाई नहीं देंगे, लेकिन यह किसी भी div के लिए करता है।

क्यों?

अद्यतन:

नोट: मैं W3C में इस स्पष्टीकरण मिल गया। यह विनिर्देशन प्रतिबिंबित तत्वों (जैसे एचटीएमएल में आईएमजी) के साथ पहले और बाद की बातचीत को पूरी तरह से परिभाषित नहीं करता है। भविष्य में विनिर्देशन में इसे अधिक विस्तार से परिभाषित किया जाएगा।

अद्यतन 2:

मैं भूल जाते हैं उल्लेख करने के लिए - मैं कल्पना करने के लिए "alt" सीएसएस के साथ छवि की विशेषता की जरूरत है।

img:before { 
    display: block; 
    content: attr(alt); 
    background-color: #333; 
    /* etc. */ 
}

स्रोत

2011-03-28 AntonAL

के साथ 'div: before', यह थोड़े इस तरह है:' '

Testdiv content

। 'Img: पहले' के साथ, मुझे लगता है कि एक सनसनीखेज व्याख्या को परिभाषित करना मुश्किल है, क्योंकि 'img' तत्व में अन्य तत्व नहीं हो सकते हैं। – thirtydot

बीटीडब्लू, आप 'pt' में छवि की चौड़ाई निर्दिष्ट क्यों कर रहे हैं? 'Pt' का उपयोग करने के बहुत कम कारण हैं। – RoToRa

@RoToRa, क्योंकि विभिन्न डिस्प्ले में अलग-अलग पिक्सेल घनत्व होते हैं। पिक्सल में सभी आकार होने के कारण, मेरी वेबसाइट अलग-अलग डिस्प्ले पर अलग दिखाई देगी। मुझे संकल्प स्वतंत्रता की आवश्यकता है। – AntonAL

विनिर्देश आप उद्धृत को देखते हुए, मुझे लगता है कि यह एक मामले में जहां आप एक तत्व में छवि लपेट और उस पर :before आवेदन करना है।

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

ध्यान में रखते हुए कि alt विशेषता वैकल्पिक पाठ के लिए है और मूल रूप से एक ही जानकारी प्रदान करना चाहिए के रूप में छवि करता है, नहीं है कि मतलब है कि आप उपयोगकर्ता के लिए जानकारी का डुप्लिकेट कर रहे हैं ?

आसपास के तत्व की title विशेषता में प्रदर्शित करने के बारे में जानकारी को प्रदर्शित करने और उसे प्रदर्शित करने के बारे में कैसे?

उदाहरण:

<style type="text/css" media="screen"> 
    .image:before { 
    content: attr(title); 
    } 
    .image img { 
    display: block; 
    width: 640pt; 
    } 
</style> 
<div class="image" title="Information here"><img ... ></div>

स्रोत

2011-03-28 13:02:55 RoToRa

मेरे प्रश्न में अपडेट 2 देखें। संपादित करने पर – AntonAL

: मुझे इसके नीचे एक तस्वीर और स्पष्टीकरण दिखाना होगा। "शीर्षक" विशेषता होने के बाद, उपयोगकर्ता को कर्सर को कर्सर पर होवर करने और प्रतीक्षा करने की आवश्यकता होगी। यह वही नहीं है जो मुझे चाहिए। – AntonAL

मेरा मतलब था 'alt' टेक्स्ट के बजाय' शीर्षक 'टेक्स्ट को': पहले 'के साथ प्रदर्शित करना था। – RoToRa

: छवियों

उत्तर

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