सीएसएस के साथ ग्रे आउट छवि?

Question

सीएसएस के साथ "ग्रेड आउट" दिखाई देने के लिए सबसे अच्छा तरीका (यदि कोई है) क्या है (यानी, छवि के एक अलग, भूरे रंग के संस्करण को लोड किए बिना)?

मेरा संदर्भ यह है कि मेरे पास एक तालिका में पंक्तियां हैं जिनमें सभी के पास सबसे अधिक सेल में बटन हैं और कुछ पंक्तियों को दूसरों की तुलना में हल्का दिखने की आवश्यकता है। तो मैं निश्चित रूप से फ़ॉन्ट लाइटर को आसानी से बना सकता हूं लेकिन मैं छवियों को प्रत्येक छवि के दो संस्करणों को प्रबंधित किए बिना हल्का बनाना चाहता हूं।

Answer 1

क्या इसे ग्रे होना चाहिए? आप बस छवि की अस्पष्टता को कम कर सकते हैं (इसे कम करने के लिए)। वैकल्पिक रूप से, आप <div> ओवरले बना सकते हैं और इसे ग्रे होने के लिए सेट कर सकते हैं (प्रभाव प्राप्त करने के लिए अल्फा बदलें)।

• एचटीएमएल:

  <div id="wrapper"> 
      <img id="myImage" src="something.jpg" /> 
  </div> 
  

• सीएसएस:

  #myImage { 
      opacity: 0.4; 
      filter: alpha(opacity=40); /* msie */ 
  } 
  
  /* or */ 
  
  #wrapper { 
      opacity: 0.4; 
      filter: alpha(opacity=40); /* msie */ 
      background-color: #000; 
  } 
  

Answer 2

यहाँ एक उदाहरण है कि चलो आप पृष्ठभूमि का रंग सेट की है। यदि आप फ्लोट का उपयोग नहीं करना चाहते हैं, तो आपको चौड़ाई और ऊंचाई को मैन्युअल रूप से सेट करने की आवश्यकता हो सकती है। लेकिन यह भी वास्तव में आसपास के सीएसएस/एचटीएमएल पर निर्भर करता है।

<style> 
#color { 
    background-color: red; 
    float: left; 
}#opacity { 
    opacity : 0.4; 
    filter: alpha(opacity=40); 
} 
</style> 

<div id="color"> 
    <div id="opacity"> 
    <img src="image.jpg" /> 
    </div> 
</div> 

Answer 3

फ़िल्टर को ध्यान में रखते हुए: अभिव्यक्ति सीएसएस के लिए एक माइक्रोसॉफ्ट एक्सटेंशन है, इसलिए यह केवल इंटरनेट एक्सप्लोरर में काम करेगा। यदि आप इसे ग्रे करना चाहते हैं, तो मैं अनुशंसा करता हूं कि आप जावास्क्रिप्ट का उपयोग करके 50% तक इसकी अस्पष्टता सेट करें।

http://lyxus.net/mv शुरू करने के लिए एक अच्छी जगह होगी, क्योंकि यह अस्पष्टता स्क्रिप्ट पर चर्चा करता है जो फ़ायरफ़ॉक्स, सफारी, केएचटीएम, इंटरनेट एक्सप्लोरर और CSS3 सक्षम ब्राउज़र के साथ काम करता है।

आप इसे भूरे रंग की सीमा भी दे सकते हैं।

Answer 4

बेहतर सभी ब्राउज़रों का समर्थन करने के:

img.lessOpacity {    
    opacity: 0.4; 
    filter: alpha(opacity=40); 
    zoom: 1; /* needed to trigger "hasLayout" in IE if no width or height is set */ 
} 

Answer 5

आप जावास्क्रिप्ट का एक बिट का उपयोग कर कोई आपत्ति नहीं है, jQuery के fadeTo() हर ब्राउज़र में अच्छी तरह से काम करता है मैं कोशिश की है।

jQuery(selector).fadeTo(speed, opacity); 

Answer 6

आप सीएसएस में rgba() का उपयोग rgb() के बजाय एक रंग को परिभाषित कर सकते हैं। इस तरह: style='background-color: rgba(128,128,128, 0.7);

आप rgb(128,128,128) के रूप में, लेकिन एक 70% अस्पष्टता के साथ एक ही रंग प्रदान करता है ताकि पीछे सामान केवल 30% के माध्यम से पता चलता है। CSS3 लेकिन यह 2008 से अधिकांश ब्राउज़रों में काम करता है। क्षमा करें, कोई #rrggbb वाक्यविन्यास जिसे मैं जानता हूं। संख्याओं के साथ खेलें - आप भूरे रंग के साथ सफेद, छाया से बाहर धो सकते हैं, जो भी आप पतला करना चाहते हैं।

ठीक ताकि आप अर्द्ध पारदर्शी ग्रे (या जो भी रंग) में आ आयत बनाने के लिए और अपनी छवि के शीर्ष पर रखना है, शायद स्थिति के साथ: पूर्ण और एक z- सूचकांक शून्य से अधिक, और आप इसे बस से पहले अपने डाल आयत के लिए छवि और डिफ़ॉल्ट स्थान आपकी छवि के समान ऊपरी-बाएं कोने होंगे। कार्य करना चाहिए।

Answer 7

CSS3 के फिल्टर संपत्ति का उपयोग करें:

img { 
    -webkit-filter: grayscale(100%); 
     -moz-filter: grayscale(100%); 
     -o-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
      filter: grayscale(100%); 
} 

ब्राउज़र समर्थन एक छोटे से खराब है, लेकिन यह 100% सीएसएस है। आप यहां पा सकते हैं CSS3 के फिल्टर संपत्ति के बारे में एक अच्छा लेख: http://blog.nmsdvid.com/css-filter-property/

Answer 8

आपका यहाँ:

<a href="#"><img src="img.jpg" /></a> 

Css ग्रे:

img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
    filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */} 

Ungray:

a:hover img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    filter: none ; /* IE6-9 */ 
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */ 
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
    } 

मुझे मिल गया पर: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

संपादित करें: आईई 10 + आईई 9 के रूप में डीएक्स फिल्टर का समर्थन नहीं करता है और पहले किया है, और न ही यह ग्रेस्केल फ़िल्टर के प्रीफिक्स्ड संस्करण का समर्थन करता है। आप इसे ठीक कर सकते हैं, नीचे दिए गए दो समाधान में से एक का उपयोग: greyscaling पूरा करने के लिए IE10 में एक एसवीजी ओवरले <meta http-equiv="X-UA-Compatible" content="IE=9">

उपयोग:

1. सेट IE10 + शीर्ष में निम्नलिखित मेटा तत्व का उपयोग IE9 मानकों मोड का उपयोग कर प्रस्तुत करना internet explorer 10 - howto apply grayscale filter?