CSS के साथ ग्रे आउट इमेज?

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;
  }

Comments

अच्छा राजभाषा 'इंटरनेट एक्सप्लोरर। आप फ़िल्टर विशेषता के साथ अधिक कर सकते हैं; के रूप में यह प्रतिपादन करने के लिए DirectDraw का उपयोग करता है। लेकिन, तब यह केवल IE पर काम करता है

मुझे jQuery का उपयोग करना था .. मैंने $ ("# imgid") किया। filter.opacity = "0.3"

— Avdhut वैद्य

Answer 2

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/

Comments

इसे और भी गहरा बनाने के लिए, contrast(x%)संपत्ति जोड़ें , उदाहरण के लिए grayscale(100%) contrast(30%)।

— डेनिस गोलोमेज़ोव

ब्राउज़र समर्थन एक वास्तविक मुद्दा है क्योंकि यह निश्चित रूप से IE10, IE11, FF26, Safari 5.1.x (Win7 x64) में काम नहीं करता है, या मूल रूप से Chrome के बाहर कुछ भी है (उदाहरण।)

— nicb

यह आपको इसे हल्के भूरे रंग में सेट करने की अनुमति नहीं देता है, लेकिन अगर एक सफेद पृष्ठभूमि पर, आप इसे बनाने के लिए अस्पष्टता के साथ संयोजन में उपयोग कर सकते हैं; img { filter: grayscale(100%); opacity: 0.4; }

— एज़वर्ड

Answer 3

अपका यहाँ:

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

सीएसएस ग्रे:

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

संपादित करें: IE10 + IE9 के रूप में DX फिल्टर का समर्थन नहीं करता है और पहले किया है, और न ही यह greyscale फिल्टर के एक उपसर्ग संस्करण का समर्थन नहीं करता है। आप इसे ठीक कर सकते हैं, नीचे दिए गए दो समाधानों में एक का उपयोग कर सकते हैं:

1. IE9 मानकों को सिर में निम्नलिखित मेटा तत्व का उपयोग करके रेंडर करने के लिए IE10 + सेट करें: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. IE10 में एक SVG ओवरले का उपयोग करें। ग्रेसीस्केलिंग इंटरनेट एक्सप्लोरर 10 को पूरा करने के लिए - कैसे ग्रेस्केल फ़िल्टर लागू करें?

Comments

धन्यवाद! यह एकमात्र उत्तर है जिसने मुझे फ़ायरफ़ॉक्स में काम करने में मदद की!

— जेमी कार्ल

@ जैमी कार्ल: खुशी है कि मैं मदद कर सकता हूं। यह कोड सभी ब्राउज़रों में अच्छा काम करता है :)

— सकटा गिंटोकी

@ ग्रैनियर इनग्रेज, ज़ूम क्यों: 1? मुझे लगता है कि एक गलती है?

— पैरा

Answer 4

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

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

Comments

बस फिर से मेरे पुराने जवाब पर ठोकर खाई। अब मैं इसके लिए JS का उपयोग करने का कोई तरीका नहीं है। प्योर सीएसएस ज्यादा बेहतर है।

— नाथन लॉन्ग

Answer 5

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

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

Comments

Whoah! कोई रैपर नहीं हैं। धन्यवाद!

— पावेल वलसोव

Answer 6

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

<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 7

ग्रे करने के लिए:

"हासिल करने के लिए।"

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

"ग्रे के साथ भरने के लिए।"

filter: contrast(0%);

@keyframes gray-filling {
	0% {}
	25% {}
	50% {filter: contrast(0%);}
	60% {filter: contrast(0%);}
	70% {filter: contrast(0%) brightness(0%) invert(100%);}
	80% {filter: contrast(0%) brightness(0%) invert(100%);}
	90% {filter: contrast(0%) brightness(0%);}
	100% {filter: contrast(0%) brightness(0%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

---

सहायक नोट

• CSS3 फ़िल्टर ग्रेस्केल और संतृप्त के बीच क्या अंतर है?

• https://www.w3.org/TR/filter-effects-1

Comments

इसके विपरीत मैं चाहता था

— साइमन Zyx

Answer 8

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

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

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

Answer 9

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

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

आप इसे ग्रे बॉर्डर भी देना चाह सकते हैं।

Comments

अपारदर्शिता एक css3 विशेषता है, हालांकि, फ़िल्टर भाग MSIE के लिए विशेष रूप से है, अन्य ब्राउज़र अपारदर्शिता उठाएंगे

— Owen