का उपयोग कर एक छवि को उज्ज्वल करना मैं सीएसएस या जावास्क्रिप्ट का उपयोग करके माउसओवर पर अपने वेबपृष्ठ पर एक छवि को उज्ज्वल करना चाहता हूं। मैंने शैलियों में अस्पष्टता और फ़िल्टर का उपयोग करके कुछ उदाहरण देखे लेकिन वे मेरे लिए काम नहीं कर रहे हैं।शैलियों या जावास्क्रिप्ट
अग्रिम धन्यवाद
सी.पी.
[अद्यतन]
एक शुद्ध सीएसएस समाधान का उपयोग करने CSS filters होगा:
img:hover {
filter: brightness(1.5);
}
यहाँ हम सभी के लिए 50% चमक जोड़ने होवर पर छवियों।
क्यों नहीं? आप हमेशा पैरेंट कंटेनर की पृष्ठभूमि को #fff (white) पर सेट कर सकते हैं और फिर छवि की अस्पष्टता को कम कर सकते हैं।
HTML:
<div class="white">
<img src="image.jpg" alt="Image" />
</div>
सीएसएस:
.white { background: #fff; }
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
एक अन्य समाधान एक JavaScript लाइब्रेरी का उपयोग करने के, इस तरह के Pixastic के रूप में है।
मुझे सीएसएस <फ़ोटोशॉप का एहसास है, लेकिन यह छवि को जितना ज्यादा धो देगा उतना चमक नहीं देगा ... बेशक, यह सीपी के बाद ही हो सकता है। :) – Mathew
पिक्सास्टिक के उपयोग के साथ-साथ एक और सुझाव जोड़ा गया: http://www.pixastic.com/lib/docs/actions/lighten/ – Mickel
मुझे त्रुटि मिली फ़िल्टर ज्ञात सीएसएस संपत्ति का नाम नहीं है अस्पष्टता नहीं है एक ज्ञात सीएसएस संपत्ति का नाम –
मैं कुछ liek का प्रयोग करेंगे:
filter: alpha(opacity=80);
opacity: 0.8;
जहाँ तक मुझे पता है, यह एक ही रास्ता सीएसएस में इसे पूरा करने के लिए है। क्या आप इसके बाद क्या कर रहे हैं?
हां, मैं इसे छवि को चमकाने के लिए प्राप्त कर सकता हूं लेकिन यह माउसओवर पर काम नहीं कर रहा है इसलिए मुझे कुछ गलत करना होगा! आईएमजी कक्षा = "माउसओवर" । Mouseover img { अस्पष्टता: 0.3; फ़िल्टर: अल्फा (अस्पष्टता = 30); } –
इस मामले में, इसे बदलें: img.mouseover: होवर {आदि} – Ryan
कक्षा को टैग के तुरंत बाद आने की आवश्यकता है। उसके बाद तुरंत चयनकर्ता। तो: tag.class: selector {etc} – Ryan
आप सीएसएस स्प्राइट्स का उपयोग कर सकते हैं। छवि के 2 संस्करण बनाएं: एक सामान्य, एक उज्ज्वल और फ़ोटोशॉप या जो भी आप उपयोग करते हैं उन्हें 1 छवि में जोड़ दें।
सीएसएस स्प्राइट्स here के बारे में एक अच्छी व्याख्या है।
बेशक, यह ऐसा कुछ नहीं हो सकता है जिसका आप अपनी साइट पर उपयोग कर सकते हैं। उदाहरण के लिए, शायद ऐसा कुछ नहीं है जिसे आप बड़ी छवियों पर उपयोग करना चाहते हैं (वे आकार में दोगुना हो जाएंगे)। आप इसे इस तरह से भी नहीं कर पाएंगे यदि आप जिन छवियों को चमकाना चाहते हैं, वे बाहरी स्रोतों से आते हैं या उदाहरण के लिए उपयोगकर्ताओं द्वारा अपलोड किए जाते हैं। यह नेविगेशन बार छवियों और अन्य यूआई तत्वों जैसी चीजों के लिए अच्छा काम करेगा।
यह उपयोगी होगा यदि आप पहले से कोशिश की गई एक और ठोस तरीके से निर्दिष्ट कर सकते हैं। –