सफ़ेद रंग में एक साधारण आकार प्रदर्शित करने वाले एक पारदर्शी पीएनजी को देखते हुए, क्या सीएसएस के माध्यम से किसी तरह इस का रंग बदलना संभव है? किसी तरह का ओवरले या क्या नहीं?
सफ़ेद रंग में एक साधारण आकार प्रदर्शित करने वाले एक पारदर्शी पीएनजी को देखते हुए, क्या सीएसएस के माध्यम से किसी तरह इस का रंग बदलना संभव है? किसी तरह का ओवरले या क्या नहीं?
जवाबों:
आप फ़िल्टर का उपयोग कर सकते हैं -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">
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }
जिसका अर्थ है कि आप काले और पारदर्शी या ग्रेस्केल से रंग में जा सकते हैं और यह एनिमेटेड gifs पर भी काम करता है
मुझे यह बेहतरीन कोडपेन उदाहरण मिला है कि आप अपने हेक्स रंग मूल्य को सम्मिलित करते हैं और इस रंग को पीएनजी पर लागू करने के लिए आवश्यक फ़िल्टर देता है
सीएसएस फिल्टर जनरेटर को हेक्स रंग को लक्षित करने के लिए काले रंग से परिवर्तित करें
उदाहरण के लिए मुझे निम्न रंग # 1a9790 के लिए अपने png की आवश्यकता थी
फिर आपको निम्न फ़िल्टर लागू करना होगा png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
आप आइकन फोंट पर एक नज़र रखना चाहते हो सकता है। 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:
बस पता चला जीथब भी अपने स्वयं के आइकन फ़ॉन्ट का उपयोग करता है: ऑक्टिकंस यह डाउनलोड करने के लिए स्वतंत्र है। आपके पास खुद के आइकन फोंट बनाने के तरीके के बारे में भी कुछ सुझाव हैं ।
मैं 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>
Img टैग में किसी भी अन्य की तरह एक पृष्ठभूमि संपत्ति है। यदि आपके पास एक सफ़ेद पीएनजी है, एक पारदर्शी आकार के साथ, एक स्टैंसिल की तरह, तो आप ऐसा कर सकते हैं:
<img src= 'stencil.png' style= 'background-color: red'>
हाँ :)
सर्फिन सफारी - ब्लॉग आर्काइव »सीएसएस मास्क
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)
में अधिकांश ब्राउज़रों , आप फ़िल्टर का उपयोग कर सकते हैं:
दोनों <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>
hue-rotate
सफेद पर काम नहीं करता है।
मुझे लगता है कि इसके लिए एक समाधान है कि 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
सबसे सरल एक लाइन जो मेरे लिए काम करती है:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
रंग को हल्का या गहरा बनाने के लिए आप अपारदर्शिता को 0 से 1 तक समायोजित कर सकते हैं।
मुझे यह गुगली करते हुए मिला, मुझे मेरे लिए सबसे अच्छा काम मिला ...
एचटीएमएल
<div class="img"></div>
सीएसएस
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
मुझे एक विशिष्ट रंग की आवश्यकता थी, इसलिए फ़िल्टर मेरे लिए काम नहीं करता था।
इसके बजाय, मैंने सीएसएस बनाया, सीएसएस मल्टीपल बैकग्राउंड इमेज और लीनियर-ग्रेडिएंट फंक्शन (जो खुद एक इमेज बनाता है) का शोषण करता है। यदि आप ओवरले ब्लेंड मोड का उपयोग करते हैं, तो आपकी वास्तविक छवि आपके वांछित रंग से युक्त "ग्रेडिएंट" छवि के साथ मिश्रित होगी (यहां, # 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>
उत्तर देना क्योंकि मैं इसके लिए एक समाधान की तलाश में था।
यदि आपके पास एक सफेद या काली पृष्ठभूमि है, तो @chrscblls उत्तर में पेन अच्छी तरह से काम करता है, लेकिन मेरा नहीं था। इसके अलावा, छवियाँ एनजी-रिपीट के साथ उत्पन्न हुई थीं, इसलिए मैं अपने सीएसएस में अपना यूआरएल नहीं रख सका और आप उपयोग नहीं कर सकते हैं :: इमोजी टैग के बाद।
इसलिए, मुझे लगा कि चारों ओर एक काम हो रहा है और लोगों को लगता है कि अगर वे भी यहाँ ठोकर खाते हैं तो इससे लोगों को मदद मिल सकती है।
तो मैंने जो किया वह तीन मुख्य अंतरों के साथ बहुत समान है:
इसे काले से सफेद या सफेद से काले रंग में बदलने के लिए पृष्ठभूमि का रंग सफेद होना चाहिए। काले रंग से, आप जो भी रंग चुन सकते हैं। सफेद रंग से लेकर थो तक, आपको अपने इच्छित रंग के विपरीत रंग का चयन करना होगा।
.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: "";
}
यदि आपको केवल एक आइकन की आवश्यकता है, तो पूरे फ़ॉन्ट सेट की कोई आवश्यकता नहीं है, साथ ही मुझे लगता है कि यह एक व्यक्तिगत तत्व के रूप में अधिक "स्वच्छ" है। तो, इस उद्देश्य के लिए, HTML5 में आप सीधे दस्तावेज़ प्रवाह के अंदर एक एसवीजी रख सकते हैं। तब आप अपने .CSS स्टाइलशीट में एक वर्ग को परिभाषित कर सकते हैं और fill
संपत्ति के साथ उसके पृष्ठभूमि रंग तक पहुँच सकते हैं:
वर्किंग फिडल: http://jsfiddle.net/qmsj0ez1/
ध्यान दें कि, उदाहरण में, मैंने :hover
व्यवहार का वर्णन करने के लिए उपयोग किया है; यदि आप केवल "सामान्य" स्थिति के लिए रंग बदलना चाहते हैं, तो आपको स्यूडोक्लास को हटा देना चाहिए।
शाब्दिक रूप से रंग बदलने के लिए, आप एक -webkit- फिल्टर के साथ एक सीएसएस संक्रमण को शामिल कर सकते हैं, जहां जब कुछ होता है तो आप अपनी पसंद के -webkit- फ़िल्टर को लागू करेंगे। उदाहरण के लिए:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
काले से सफ़ेद, या सफ़ेद से काले रंग की ह्यु रोटेट फ़िल्टर को तस्वीर बदलते समय काम नहीं आता है, क्योंकि काले और सफ़ेद तकनीकी रूप से रंग नहीं होते हैं। इसके बजाय, काले और सफेद रंग परिवर्तन (काले से सफेद या इसके विपरीत) को इनवर्टर फिल्टर संपत्ति के साथ किया जाना चाहिए।
.img1 {
filter: invert(100%);
}
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>
background-color
CSS प्रॉपर्टी सेट कर सकते हैं। आप गैर-पारदर्शी भाग बना सकते हैं, जो निश्चित हो जाएगा, और छवि का पारदर्शी भाग जो आपके द्वारा सीएसएस के माध्यम से किसी भी रंग से भरा जाएगा। क्या आप जो हासिल करना चाहते हैं?