2013-08-07 8 views
6

सीएसएस शैली को केवल पीएनजी छवियों पर कैसे लागू कर सकते हैं?सभी पीएनजी छवियों का चयन करें

.pngImages {opacity:0.75} 
.pngImages:hover {opacity:1} 

मैं कई पृष्ठों है कि बार-बार होते पीएनजी फ़ाइलों की है। बिना निर्दिष्ट उन सभी को इस वर्ग के आवेदन कर सकते हैं कैसे img class="pngImage" ...

इस तरह लेकिन सिर्फ PNG छवियों के लिए एक बात:

div {background-color:#ddd} 
+0

आपकी सभी छवियां पीएनजी हैं या कुछ gif, jpg, आदि हैं? – Nitesh

+0

क्या कोई कारण है कि आप कक्षा विशेषता नहीं जोड़ना चाहते हैं? – Gevious

+0

अच्छा रचनात्मक प्रश्न +1। लेकिन मुझे नहीं लगता कि इसमें एक विशिष्ट सीएसएस समाधान है। - @ user2586454 – Nitesh

उत्तर

6

आप विशेषता का भी उपयोग करेंगे

img[src$=".png"] 

यह सभी पीएनजी छवियों का चयन करता है

+4

संदर्भ: http://www.w3.org/TR/css3- चयनकर्ताओं/देखें: 'ई [foo $ = "bar"] ' –

+3

यदि आपके पास कुछ है तो' ' जैसी कुछ संभावित समस्या होगी गतिशील आउटपुट पर रूटिंग या कैश-बस्टिंग के लिए क्वेरी स्ट्रिंग का उपयोग कर रहे हैं, या यदि आपके पास 'पीएनजी' या' पीएनजी 'जैसे मिश्रित मामले हैं (शायद अधिक व्यावहारिक अपवाद हैं)। यह कहना सही है कि यह उन सभी छवियों का चयन करता है जिनके 'src' बिल्कुल' .png' के साथ समाप्त होता है। –

1

मान लें कि आपको केवल <img> टैग्स की देखभाल करने की आवश्यकता है, न कि पृष्ठभूमि-छवियों के साथ-साथ:

img[src$='.png'] { 
    background-color: #ddd; 
} 

यह मूलतः जो .png

0

में समाप्त होने वाले एक src विशेषता मान है वैसा करने के लिए [attribute$='value'] का भी उपयोग करेंगे छवि टैग का चयन करता है:

img[src$=".png"] { opacity:0.75; } 
img[src$=".png"]:hover { opacity:1; } 
0

मुझे लगता है कि आप में सक्षम होना चाहिए उदाहरण के लिए एक विशेषता चयनकर्ता 1 का उपयोग करके ऐसा करें:

img[src$=".png"]{border:2px solid #8c0000;}

आपको यह सुनिश्चित करने के लिए इंटरनेट एक्सप्लोरर में परीक्षण करने की आवश्यकता हो सकती है कि इसे उठाया जाए।

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