ओवरले के बिना सीएसएस का उपयोग कर टिंट छवि

Question

क्या वेबकिट ब्राउज़र में ओवरले के बिना सीएसएस का उपयोग करके एक विशिष्ट रंग के साथ एक छवि को टेंट करना संभव है?

असफल प्रयासों

• छवि सेपिया या एक मनमाना रंग hue-rotate का उपयोग कर टिंट प्रबंधित लेकिन एक विशिष्ट रंग के साथ यह टिंट के लिए एक रास्ता नहीं मिल सका।
• एक "टिंट" एसवीजी फ़िल्टर बनाना और इसे -webkit-filter: url(#tint) के साथ कॉल करना क्रोम पर काम नहीं करता है।
• /box-shadow सीएसएस गुण drop-shadow/opacity फ़िल्टर के सभी संभावित संयोजन वांछित प्रभाव उत्पन्न नहीं करते हैं।

विचार

• एक रंग को देखते हुए, नहीं यह HSB फिल्टर (hue-rotate, saturation, brightness) ने अपने रंग उत्पन्न करने के लिए गठबंधन करने के लिए संभव हो सकता है?

Answer 1

आखिरकार यह शेडर्स का उपयोग कर होगा। फ़िल्टर पर डब्ल्यू 3 सी डॉक्स देखें।

पल में क्या उदाहरण के लिए संभव है:

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/ 
-webkit-filter: brightness(50%); 

देखें

• David Walsh on CSS Filters
• Stackoverflow: apply a rose tint...:
• W3C Filter Effects 1.0 Docs - 38.2.5. Other uniform variables: the CSS shaders parameters

अद्यतन:

एडोब जारी की अपनी HTML5 आधारित समर्थित ब्राउज़र पर custom filters (Shaders) के लिए समर्थन के साथ CSS Filter Labs:

Answer 2

जब कोई योग्य स्वतंत्र टिंट फिल्टर आप कर रहे हैं छायांकन के बिना मौजूदा फिल्टर की संरचना द्वारा एक प्रकार का बना सकते हैं।

सेपिया कम्बाइन रंग एकजुट करने के लिए है, तो रंग आप चाहते हैं इसके साथ

-webkit-filter: sepia(90%) hue-rotate(90deg); 

मैं अपने टिंट के लिए एक अल्फा मूल्य, इसके वास्तव में एक ओवरले के साथ सीमाओं का उपयोग रंगा हुआ है लेकिन नहीं करता है 'के लिए रंग-बारी बारी से जब कोई अन्य ब्राउज़र उन फ़िल्टर प्राप्त करता है तो सेपिया + ह्यू-रोटेट में संक्रमण करने के लिए किसी भी अतिरिक्त डोम तत्वों का उपयोग करें।

Answer 3

तब अंडरले के बारे में कैसे?

HTML:

<span class="tint"><img src="..." /></span> 

सीएसएस:

.tint { background-color:red; display:inline-block; } 
.tint img { opacity:0.8 } 

रंग और अस्पष्टता ट्वीक के रूप में आप चाहते हैं। वास्तव में उन पर पारदर्शिता वाले छवियों पर काम नहीं करता है।

Answer 4

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

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

Answer 5

शेडर्स का उपयोग किए बिना आज एक एसवीजी फ़िल्टर का उपयोग करना संभव है। आप इसे एक सीएसएस फ़िल्टर के रूप में उपयोग कर सकते हैं (हालांकि यह आईई में काम नहीं करेगा) -webkit-filter: "url (#yourfilterID)" आदि वाक्यविन्यास के माध्यम से।

<svg width="800px" height="600px" viewbox="0 0 800 600"> 
    <defs> 
     <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
     <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                  .2 .2 .2 0 0 
                  .0 .0 .0 0 0 
                  0 0 0 1 0"/> 
     </filter>  
    </defs> 

<image x="0" y="0" width="550" height="370" preserveAspectRatio="true" 
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/> 
</svg> 

http://codepen.io/mullany/details/baLkH/