यह काम करता है:CSS3 का उपयोग कर छवि के रंग कैसे बदला जा सकता है?
a { color: hsla(0,100%,50%,0.2) }
और यह नहीं करता है:
img { color: hsla(0,100%,50%,0.2) }
वहाँ img { opacity: 1 } की तरह कुछ है कि एक छवि को एचएसएल मान निर्धारित करने के लिए अनुमति देता है?
टेक्स्ट और छवियां 2 अलग-अलग चीजें हैं।
पाठ सेटिंग्स उपलब्ध कराने (सजावट, आकार फ़ॉन्ट रंग ...)
एक छवि किसी अन्य तरीके से प्रदान की गई है साथ ब्राउज़र द्वारा प्रदान की गई है। ब्राउज़र में छवि पर क्या है इसके बारे में जानकारी नहीं है, और क्या छवि स्वयं को बदलने के लिए नहीं हो सकती है।
रंग आदि जैसे पैरामीटर छवि पर प्रभाव नहीं पड़ेगा।
वैसे, रंग पैरामीटर टेक्स्ट रंग को परिभाषित करता है।
संपादित करें: यदि आप किसी छवि पर "रंग" लागू करना चाहते हैं, तो आप पृष्ठभूमि छवि के साथ एक div बना सकते हैं, और फिर उस div में एक पृष्ठभूमि रंग और अस्पष्टता के साथ एक div div। इस तरह ट्रांसपरेंट रंग छवि पर ओवरले किया जाएगा।
color विशेषता टेक्स्ट वर्णों, सीमाओं और इस तरह के चित्रकारी रंग के रूप में उपयोग की जाती है। यह बिटमैप छवियों पर लागू नहीं होता है।
इसलिए, इससे कोई फर्क नहीं पड़ता कि आप अपने रंग मूल्य में अल्फा चैनल जानकारी जोड़ते हैं या नहीं: पूरी घोषणा लागू नहीं होती है।
opacity अलग है, क्योंकि यह संपूर्ण तत्व के लिए अल्फा मान निर्दिष्ट करता है।
सीएसएस के साथ छवि के रंगों को प्रभावित करने का एकमात्र तरीका अल्फा चैनल को नियंत्रित करने के लिए opacity का उपयोग करना है। ध्यान दें कि यदि आप किसी अन्य तत्व को ऊपर के ऊपर रखकर अपनी छवि के चमक को बदल सकते हैं (सॉर्ट करें)। यह सुनिश्चित करें कि यह स्थिति और आकार को समायोजित करके छवि को बिल्कुल कवर करता है, पृष्ठभूमि-रंग काला बना देता है, और अस्पष्टता को 0.5 पर सेट करता है।
आप कुछ ब्राउज़रों में छवियों के लिए फ़िल्टर लागू कर सकते हैं: फ़ायरफ़ॉक्स आप सीएसएस से SVG filters to HTML content लागू करने के लिए अनुमति देता है, लेकिन क्रोम, सफारी और ओपेरा आप, here's an example that works in Opera उन पर फ़िल्टर लागू करने के लिए एसवीजी में अपनी सामग्री रैप करने के लिए की आवश्यकता होगी। आपकी आवश्यकता के लिए उपयुक्त SVG filter नहीं हो सकता है, लेकिन यदि आपके पास कोई अन्य विकल्प नहीं है तो यह खोज करने का एक एवेन्यू हो सकता है।
इंटरनेट एक्सप्लोरर में आप a static filter का उपयोग करने में सक्षम हो सकते हैं।
मैंने जिस विकल्प का उपयोग किया था वह एक छवि में स्प्राइट्स पर आधारित था, फिर 'होवर' और' सक्रिय 'राज्यों के लिए टैग की' पृष्ठभूमि-स्थिति 'विशेषता समायोजित करें या जब भी रंग बदलना चाहिए तो रंग मॉडल। अब मैं मैन्युअल रूप से sprites बनाने से बचने के लिए एक रास्ता तलाश रहा हूँ। – kalyanji
मैंने इसे ओपेरा 12 (अभी भी पस्टो पर आधारित) के साथ परीक्षण किया और यह काम किया। यह वेबकिट के आधार पर [नए ओपेरा संस्करण (15 से) के साथ काम नहीं कर सकता है (http://www.opera.com/docs/changelogs/unified/1500n/) – surfmuggle
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
इन फिल्टर की सहायता से आप अलग रंग अमेरिका देश के आदिवासियों का सरदार में एक भी छवि बदलने के लिए हो सकता है लेकिन वे भी ब्राउज़र संगतता मुद्दे
है यह काम करता है:
img{ filter: hue-rotate(0deg); }
डिग्री 0 से 360 है ।
आप जिसका अर्थ है कि "img {अस्पष्टता: 1}" छवि के अल्फ़ा चैनल के लिए लागू नहीं है? – kalyanji
@ कल्याणजी मुझे नहीं लगता कि वह इसका मतलब है। वह कह रहा है कि 'रंग' विशेषता का कोई छवि तत्व पर कोई अर्थ नहीं है। –
कोई अल्फा (अस्पष्टता) कुछ और नहीं है, लेकिन यदि आप एक छवि के लिए एक रंग (उदाहरण के लिए लाल) लागू करेंगे, तो बिंदु क्या होगा, छवि एक लाल वर्ग @ पेक्का: बिल्कुल – Nealv