सीएसएस - टिंटेड अस्पष्टता

Question

मुझे आश्चर्य है कि सीएसएस में अस्पष्टता के लिए टिंट लागू करना संभव है?

मेरे पास विभिन्न आकारों का एक पीएनजी है। जब उपयोगकर्ता पीएनजी पर हो जाता है, तो मैं चाहता हूं कि पीएनजी # 000 के टिंट के साथ अस्पष्टता को 0.5 में बदल दे। w3schools के अनुसार, आपके पास केवल अस्पष्टता मान को संशोधित करने की क्षमता है, न कि टिंट जो हमेशा #FFF पर सेट होती है।

मैंने अपने पीएनजी के शीर्ष पर अपने अस्पष्टता सेट के साथ एक ब्लैक बॉक्स स्थापित करने की कोशिश की है और सीएसएस के माध्यम से यह पीएनजी होवर पर display:none/block; के बीच टॉगल करता है। यह काम नहीं करता क्योंकि मेरे पीएनजी आयताकार छवियां नहीं हैं और विभिन्न आयाम हैं जिसका अर्थ है कि ब्लैक बॉक्स में केवल मेरे पीएनजी शामिल नहीं हैं।

क्या मेरी समस्या का कोई वैकल्पिक समाधान है?

Answer 1

वेबकिट उदाहरण: http://jsfiddle.net/5APXu/1/

div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); } 

यह सीएसएस filter property, जो gain support शुरू हो रहा है उपयोग करता है। कई प्रभाव संभव हैं, इसलिए आप शायद काले/भूरे रंग की टिंट की अपनी मूल इच्छा प्राप्त कर सकते हैं।

• Article many filter examples
• Masking (alternate option)

Answer 2

आप जो प्रभाव चाहते हैं उसे प्राप्त करने के लिए होवर पर छवि पर पृष्ठभूमि रंग लागू कर सकते हैं। यहाँ एक उदाहरण है: http://jsfiddle.net/atbnn

img:hover { 
    opacity: 0.5; 
    background: #000; 
}