सीएसएस के माध्यम से पीएनजी छवि का रंग बदलें?

Question

सफ़ेद रंग में एक साधारण आकार प्रदर्शित करने वाले एक पारदर्शी पीएनजी को देखते हुए, क्या सीएसएस के माध्यम से किसी तरह इस का रंग बदलना संभव है? किसी तरह का ओवरले या क्या नहीं?

Comments

आप background-colorCSS प्रॉपर्टी सेट कर सकते हैं। आप गैर-पारदर्शी भाग बना सकते हैं, जो निश्चित हो जाएगा, और छवि का पारदर्शी भाग जो आपके द्वारा सीएसएस के माध्यम से किसी भी रंग से भरा जाएगा। क्या आप जो हासिल करना चाहते हैं?

— jakub.g

@qbk, यह एक जवाब के लायक है, न कि केवल एक टिप्पणी। और आपने मुझे तकनीकी रूप से 1 सेकंड से हराया।

— किरिल जी

आप किसी भी आइकन को 100% काले या 100% सफ़ेद (बैकग्राउंड ट्रांसपेरेंट पारदर्शी) को पुनरावर्ती करने के लिए एक सम्मिश्रण मोड के साथ पासीडो-तत्वों का उपयोग कर सकते हैं। मेरा जवाब यहाँ देखें: stackoverflow.com/a/39796437/1472114

— chrscblls

Answer 1

आप फ़िल्टर का उपयोग कर सकते हैं -webkit-filterऔर filter: फ़िल्टर्स ब्राउज़रों के लिए अपेक्षाकृत नए हैं, लेकिन निम्नलिखित CanIUse तालिका के अनुसार 90% से अधिक ब्राउज़रों में समर्थित हैं: https://caniuse.com/#feat=css-filters

आप एक छवि को ग्रेस्केल, सीपिया और बहुत कुछ बदल सकते हैं (उदाहरण देखें)।

तो अब आप फ़िल्टर के साथ PNG फ़ाइल का रंग बदल सकते हैं।

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

_{स्रोत}

Comments

इतना कम जवाब है कि अधिकांश ब्राउज़रों के लिए कोई सामान्य समाधान नहीं है।

— ट्रिलियन

लेकिन क्या वास्तव में हायरोटेट या सैचुरेट एक सफेद छवि के लिए कुछ कर सकता है?

— कीथ

2016 अपडेट: यह अब IE: caniuse.com/#feat=css-filters

— Stan

@datatype_void कभी-कभी आप स्वयं आरंभिक छवि को नियंत्रित नहीं करते हैं। तो, ऐसा लगता है कि आप सहमत हैं कि मेरी बात वैध है, आप काले या सफेद से शुरू होने वाले किसी भी रंग में नहीं मिल सकते। ओह, और मैंने इस निष्कर्ष पर पहुंचने के लिए 5 मिनट से अधिक समय तक खेला।

— AsGoodAsItGets

यह भी निर्दिष्ट करें कि आप इस तरह से सामान कर सकते हैं: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }जिसका अर्थ है कि आप काले और पारदर्शी या ग्रेस्केल से रंग में जा सकते हैं और यह एनिमेटेड gifs पर भी काम करता है

— tatsu

Answer 2

मुझे यह बेहतरीन कोडपेन उदाहरण मिला है कि आप अपने हेक्स रंग मूल्य को सम्मिलित करते हैं और इस रंग को पीएनजी पर लागू करने के लिए आवश्यक फ़िल्टर देता है

सीएसएस फिल्टर जनरेटर को हेक्स रंग को लक्षित करने के लिए काले रंग से परिवर्तित करें

उदाहरण के लिए मुझे निम्न रंग # 1a9790 के लिए अपने png की आवश्यकता थी

फिर आपको निम्न फ़िल्टर लागू करना होगा png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

Comments

<3 <3 <3 <3 <3 <3

— dwjohnston

मैंने इस कोड का उपयोग करके नीले से सफेद रंग बदल दिया है:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

— अंजन बिस्वास

यह भी खूब रही!!

— थिआगो पाइर्स

लेखक एक मूर्ति के लायक है! (ध्यान दें: चमक (0) संतृप्त (100%) वैकल्पिक

— प्रेपेंड

किसी को भी यह की जरूरत है, तो यहां इस कोड का एक टीएस रूपांतरण है gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08

— dwjohnston

Answer 3

आप आइकन फोंट पर एक नज़र रखना चाहते हो सकता है। http://css-tricks.com/examples/IconFont/

संपादित करें: मैं अपने नवीनतम प्रोजेक्ट पर Font-Awesome का उपयोग कर रहा हूं । आप इसे बूटस्ट्रैप भी कर सकते हैं। बस इसे अपने में रखें <head>:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

और फिर आगे बढ़ें और इस तरह से कुछ आइकन-लिंक जोड़ें:

<a class="icon-thumbs-up"></a>

यहां देखें पूरी चीट शीट

--edit--

नए संस्करण में फ़ॉन्ट-विस्मयकारी अलग-अलग वर्ग के नामों का उपयोग करता है, शायद इसलिए क्योंकि यह सीएसएस फाइलों को बहुत छोटा बनाता है, और अस्पष्ट टॉस कक्षाओं से बचने के लिए। तो अब आपको उपयोग करना चाहिए:

<a class="fa fa-thumbs-up"></a>

संपादित करें 2:

बस पता चला जीथब भी अपने स्वयं के आइकन फ़ॉन्ट का उपयोग करता है: ऑक्टिकंस यह डाउनलोड करने के लिए स्वतंत्र है। आपके पास खुद के आइकन फोंट बनाने के तरीके के बारे में भी कुछ सुझाव हैं ।

Comments

फ़ॉन्ट विस्मयकारी इसके नाम पर रहता है।

— 21:39 पर HerrimanCoder

बॉक्स आउटिंग के लिए +1। और आजकल एक (svg) छवि से वेबफोंट बनाने में मदद करने के लिए ऑनलाइन ऐप्स का उपयोग करना आसान है।

— यवन वन्डर सेंडेन

यदि <a class="icon-thumbs-up"> </a> पुराना वर्ग नाम है और <a class="fa fa-thumbs-up"> </a> नया है तो मुझे नहीं लगता है CSS को छोटा बनाता है, मैं fa fa और faumbs-up के बीच एक अतिरिक्त व्हाट्सएप देख सकता हूं, अगर मैं गलत नहीं हूं तो उस CSS फ़ाइल में कम से कम 1 अतिरिक्त बाइट जोड़ें?

— ब्रैंडिटो

फ़ॉन्ट विस्मयकारी यह दिन में बहुत अच्छा था, दुर्भाग्य से इसकी रेंडरिंग अवरुद्ध है, जो Google बनाता है और यह उपयोगकर्ताओं को दुखी करता है। हमने पहली बार CSS और बाइनरी फॉन्ट दोनों फाइलों से अप्रयुक्त फोंट को हटाकर, लगभग आधे से डेटा कम करके इसे संबोधित किया। अब हम पूरी तरह से हटाने और एक साधारण स्प्राइट के साथ बदलने की प्रक्रिया में हैं, जो ब्लॉकिंग (DOM और CSSOM प्रक्रिया को तेज़ी से प्रस्तुत नहीं करता है, जिससे पृष्ठ पर तत्व तेज़ी से दिखाई देते हैं), और 6KB तक डेटा को 75% कम कर देगा। एफए लगभग 100KB है। सीएसएस मास्क हमारे मामले में मदद कर सकते हैं, लेकिन शायद अनावश्यक।

— YK

Answer 4

मैं SVG फ़िल्टर का उपयोग करके ऐसा करने में सक्षम रहा हूँ। आप एक फ़िल्टर लिख सकते हैं जो स्रोत छवि के रंग को उस रंग से गुणा करता है जिसे आप बदलना चाहते हैं। नीचे दिए गए कोड स्निपेट में, बाढ़-रंग वह रंग है जिसे हम छवि का रंग बदलना चाहते हैं (जो इस मामले में लाल है।) feComposite फ़िल्टर को बताता है कि हम रंग को कैसे संसाधित कर रहे हैं। अंकगणित के साथ feComposite का सूत्र है (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) जहां i1 और i2 तदनुसार in2 के लिए इनपुट रंग हैं। तो केवल k1 = 1 को निर्दिष्ट करने का मतलब है कि यह सिर्फ i1 * i2 करेगा, जिसका अर्थ है कि दोनों इनपुट रंगों को एक साथ गुणा करना।

नोट: यह केवल HTML5 के साथ काम करता है क्योंकि यह इनलाइन SVG का उपयोग कर रहा है। लेकिन मुझे लगता है कि आप एसवीजी को एक अलग फाइल में डालकर पुराने ब्राउजर के साथ यह काम कर सकते हैं। मैंने अभी तक उस दृष्टिकोण की कोशिश नहीं की है।

यहाँ स्निपेट है:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

Comments

यार तुम इस जवाब पर लुट रहे हो। जो कोई भी छवियों को फ़िल्टर करने से परे देखना चाहता है: ह्यू-रोटेट कर सकता है - यह ऐसा करने का तरीका है।

— MaxPRafferty

Answer 5

Img टैग में किसी भी अन्य की तरह एक पृष्ठभूमि संपत्ति है। यदि आपके पास एक सफ़ेद पीएनजी है, एक पारदर्शी आकार के साथ, एक स्टैंसिल की तरह, तो आप ऐसा कर सकते हैं:

<img src= 'stencil.png' style= 'background-color: red'>

Comments

मैं सफेद हिस्से को अलग तरह से रंगना चाहता हूं, पारदर्शी हिस्से को नहीं।

— वेस्ले

सबसे अच्छा समाधान मुझे अब तक मिला। बहुत बुरा यह केवल तभी काम करेगा जब आप अपनी वेबसाइट पर एक ठोस पृष्ठभूमि-रंग का उपयोग करते हैं

— जूल्स कॉल

@ आपको छवि को उल्टा करने की आवश्यकता है (इसलिए सफेद बिट पारदर्शी और बाकी सफेद हो जाती है) जिसे आप अपने पसंदीदा छवि संपादक और मास्क का उपयोग करके कर सकते हैं।

— चार्ल्स गुडविन 18

@CharlesGoodwin यह केवल तभी काम करता है जब छवि को एक सफेद पृष्ठभूमि में रखा गया हो।

— एलेक्स

Answer 6

हाँ :)

सर्फिन सफारी - ब्लॉग आर्काइव »सीएसएस मास्क

WebKit अब CSS में अल्फा मास्क का समर्थन करता है। मास्क आपको एक बॉक्स की सामग्री को एक पैटर्न के साथ ओवरले करने की अनुमति देता है जिसका उपयोग अंतिम प्रदर्शन में उस बॉक्स के कुछ हिस्सों को बाहर करने के लिए किया जा सकता है। दूसरे शब्दों में, आप एक छवि के अल्फा के आधार पर जटिल आकृतियों को क्लिप कर सकते हैं।
[...]
हमने इन मुखौटों पर बहुत नियंत्रण के साथ वेब डिजाइनर प्रदान करने के लिए नए गुणों को पेश किया है और उन्हें कैसे लागू किया जाता है। नए गुण पृष्ठभूमि और सीमा-छवि गुणों के अनुरूप हैं जो पहले से मौजूद हैं।

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Comments

क्या यह किसी भी (अभी तक आने वाला) मानक का हिस्सा है, क्योंकि मुझे वेबकिट से संबंधित कोई भी जानकारी नहीं मिली है, या यह सिर्फ ऐप्पल-फ्लेवर है? ऐसा लगता है कि W3 ऐसे usecases के लिए SVG का सुझाव दे रहा है: w3.org/TR/SVG/masking.html

— feeela

अफसोस की बात यह है कि यह केवल वेबकिट लगता है और ब्लॉग वास्तविक उदाहरणों के बजाय कंपोजिट इमेजेस का उपयोग करके धोखा देता है। यह उत्तर लाल हेरिंग का एक सा है।

— चार्ल्स गुडविन

Answer 7

में अधिकांश ब्राउज़रों , आप फ़िल्टर का उपयोग कर सकते हैं:

• दोनों <img>तत्वों और अन्य तत्वों की पृष्ठभूमि छवियों पर

• और उन्हें अपने सीएसएस में या तो सांख्यिकीय रूप से सेट करें, या गतिशील रूप से जावास्क्रिप्ट का उपयोग करें

नीचे डेमो देखें।

---

<img> तत्वों

आप इस तकनीक को एक <img>तत्व पर लागू कर सकते हैं :

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

पृष्ठभूमि छवियों

आप इस तकनीक को पृष्ठभूमि छवि पर लागू कर सकते हैं:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<div id="original"></div>

<div id="changed"></div>

जावास्क्रिप्ट

आप रनटाइम पर फ़िल्टर सेट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;

#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}

<div id="original"></div>

<div id="changed"></div>

Comments

प्रश्न पारदर्शी पृष्ठभूमि के साथ एक सफेद छवि को रंगीन करने के बारे में था। hue-rotateसफेद पर काम नहीं करता है।

— Synetech

Answer 8

मुझे लगता है कि इसके लिए एक समाधान है कि a) ठीक वही है जो आप 5 साल पहले देख रहे थे, और b) यहाँ अन्य कोड विकल्पों की तुलना में थोड़ा सरल है।

किसी भी सफेद पीएनजी (जैसे, पारदर्शी पृष्ठभूमि पर सफेद आइकन) के साथ, आप चयनकर्ता के बाद पुनरावर्ती में :: जोड़ सकते हैं।

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

इस कोडपेन (होवर पर रंग स्वैप लागू करना) देखें: http://codepen.io/chrscblls/pen/bwAXZO

Comments

मैंने इमगुर की छवि को फिर से स्थापित किया, उसे लोड करने में कुछ परेशानी हो रही थी।

— १

क्रोम के नवीनतम संस्करण में, ऐसा लगता है कि (पारदर्शी) पृष्ठभूमि भी रंग में सेट हो रही है। लिंक किए गए उदाहरण में, जब मैं मंडराता हूं, तो मुझे बस एक अपारदर्शी गुलाबी वर्ग दिखाई देता है ... फ़ायरफ़ॉक्स में अच्छी तरह से काम करता है।

— Logidelic

@chrscblls लिंक मृत है।

— स्टीवन लू

Answer 9

सबसे सरल एक लाइन जो मेरे लिए काम करती है:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

रंग को हल्का या गहरा बनाने के लिए आप अपारदर्शिता को 0 से 1 तक समायोजित कर सकते हैं।

Comments

अच्छा लगा। यह यहां अन्य समाधानों की सभी सीमाओं से बचा जाता है।

— cdonner

इसे मजबूत बनाने के लिए 2-3 बार ड्रॉप-

— शैड दोहराएं

सामान्य समाधान, सीएसएस में थोड़ा गड़बड़ दिखता है, लेकिन एक टिप्पणी के साथ, यह पूरी तरह से समझ में आता है। धन्यवाद!

— रिचर्ड केएमआईकेएल गेनेराएल डेंटन

सटीक रंग पाने के लिए काम नहीं करेंगे, यह हमेशा मूल रंग और नए के बीच किसी प्रकार का मिश्रण होता है।

— स्विस्विस

यह दृष्टिकोण छवि को थोड़ा विकृत करता है और हर बार ड्रॉप-शैड लागू होने पर यह खराब हो जाता है। जैसे एक प्रति की प्रतिलिपि बनाने से परिणाम मूल से भिन्न होते हैं।

— SMAG

Answer 10

मुझे यह गुगली करते हुए मिला, मुझे मेरे लिए सबसे अच्छा काम मिला ...

एचटीएमएल

<div class="img"></div>

सीएसएस

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

Comments

यह काम करता है, मैंने मतदान किया। लेकिन सिर्फ रिकॉर्ड के लिए इसमें कुछ समस्याएं होती हैं जैसे पृष्ठभूमि की छवि को आकार नहीं दे सकते हैं, छवि को स्थिति नहीं दे सकते हैं और यह दोहराता है।

— डेनियल

ओह, मैं वास्तव में उन लोगों की कोशिश नहीं की ... नीचे लिंक की कोशिश करो। developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image धन्यवाद, डैनियल

— मुथुकुमार अंबालागन

Answer 11

मुझे एक विशिष्ट रंग की आवश्यकता थी, इसलिए फ़िल्टर मेरे लिए काम नहीं करता था।

इसके बजाय, मैंने सीएसएस बनाया, सीएसएस मल्टीपल बैकग्राउंड इमेज और लीनियर-ग्रेडिएंट फंक्शन (जो खुद एक इमेज बनाता है) का शोषण करता है। यदि आप ओवरले ब्लेंड मोड का उपयोग करते हैं, तो आपकी वास्तविक छवि आपके वांछित रंग से युक्त "ग्रेडिएंट" छवि के साथ मिश्रित होगी (यहां, # BADA55)

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }

<div class="colored-image"></div>

Comments

मेरे लिए काम नहीं किया। मैं यह नहीं बता सकता कि, मैं कॉपी क्यों करता हूं

— विक सीडड्यूल्यूव

@VicSeedoubleyew स्निपेट ठीक काम करता है। अपने सीएसएस वास्तव में लागू किया जा रहा है यह सुनिश्चित करने के लिए देव उपकरणों का उपयोग करके अपने div का निरीक्षण करें। इसके अलावा, सुनिश्चित करें कि यदि आप मेरे द्वारा प्रदान किए गए का उपयोग नहीं कर रहे हैं, तो आपकी छवि का URL मान्य है। संपादित करें: यदि स्निपेट आपके लिए काम नहीं करता है, तो आप एक ऐसे ब्राउज़र का उपयोग कर सकते हैं जो या तो पुराना है या लीनियर-ग्रेडिएंट फ़ंक्शन का समर्थन नहीं करता है।

— रोल्ज़न्ज़

Answer 12

उत्तर देना क्योंकि मैं इसके लिए एक समाधान की तलाश में था।

यदि आपके पास एक सफेद या काली पृष्ठभूमि है, तो @chrscblls उत्तर में पेन अच्छी तरह से काम करता है, लेकिन मेरा नहीं था। इसके अलावा, छवियाँ एनजी-रिपीट के साथ उत्पन्न हुई थीं, इसलिए मैं अपने सीएसएस में अपना यूआरएल नहीं रख सका और आप उपयोग नहीं कर सकते हैं :: इमोजी टैग के बाद।

इसलिए, मुझे लगा कि चारों ओर एक काम हो रहा है और लोगों को लगता है कि अगर वे भी यहाँ ठोकर खाते हैं तो इससे लोगों को मदद मिल सकती है।

तो मैंने जो किया वह तीन मुख्य अंतरों के साथ बहुत समान है:

• url मेरे img टैग में होने के कारण, मैंने इसे (और एक लेबल) एक और div में रखा है, जिस पर :: काम करेगा।
• 'मिक्स-ब्लेंड-मोड' को 'गुणा' या 'स्क्रीन' के बजाय 'अंतर' पर सेट किया गया है।
• मैंने एक :: को पहले उसी मान के साथ जोड़ा, तो :: के बाद 'अंतर' का 'अंतर' करेगा: पहले और बाद में इसे रद्द कर दिया गया।

इसे काले से सफेद या सफेद से काले रंग में बदलने के लिए पृष्ठभूमि का रंग सफेद होना चाहिए। काले रंग से, आप जो भी रंग चुन सकते हैं। सफेद रंग से लेकर थो तक, आपको अपने इच्छित रंग के विपरीत रंग का चयन करना होगा।

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

Answer 13

यदि आपको केवल एक आइकन की आवश्यकता है, तो पूरे फ़ॉन्ट सेट की कोई आवश्यकता नहीं है, साथ ही मुझे लगता है कि यह एक व्यक्तिगत तत्व के रूप में अधिक "स्वच्छ" है। तो, इस उद्देश्य के लिए, HTML5 में आप सीधे दस्तावेज़ प्रवाह के अंदर एक एसवीजी रख सकते हैं। तब आप अपने .CSS स्टाइलशीट में एक वर्ग को परिभाषित कर सकते हैं और fillसंपत्ति के साथ उसके पृष्ठभूमि रंग तक पहुँच सकते हैं:

वर्किंग फिडल: http://jsfiddle.net/qmsj0ez1/

ध्यान दें कि, उदाहरण में, मैंने :hoverव्यवहार का वर्णन करने के लिए उपयोग किया है; यदि आप केवल "सामान्य" स्थिति के लिए रंग बदलना चाहते हैं, तो आपको स्यूडोक्लास को हटा देना चाहिए।

Answer 14

शाब्दिक रूप से रंग बदलने के लिए, आप एक -webkit- फिल्टर के साथ एक सीएसएस संक्रमण को शामिल कर सकते हैं, जहां जब कुछ होता है तो आप अपनी पसंद के -webkit- फ़िल्टर को लागू करेंगे। उदाहरण के लिए:

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

Answer 15

काले से सफ़ेद, या सफ़ेद से काले रंग की ह्यु रोटेट फ़िल्टर को तस्वीर बदलते समय काम नहीं आता है, क्योंकि काले और सफ़ेद तकनीकी रूप से रंग नहीं होते हैं। इसके बजाय, काले और सफेद रंग परिवर्तन (काले से सफेद या इसके विपरीत) को इनवर्टर फिल्टर संपत्ति के साथ किया जाना चाहिए।

.img1 { filter: invert(100%); }

Answer 16

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

स्रोत: https://codepen.io/taryaoui/pen/EKkcu