सीएसएस ग्रेस्केल फ़िल्टर और पृष्ठभूमि-मिश्रण-मोड एक ही समय में?

Question

मैं एक फ़ोटोशॉप फ़ाइल में उसी तरह से एक छवि का इलाज करने की कोशिश कर रहा हूं - छवि को ग्रेस्केल में विलुप्त करना, और उसके बाद एक बहु रंग मिश्रण मोड के साथ रंग ओवरले लागू करना। इस उद्देश्य से, मैं के साथ ...

.someclass 
{ 
    /* grayscale */ 
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1); 
    filter: url(desaturate.svg#greyscale); 

    /* multiply */ 
    background-color: rgba(190, 50, 50, 0.65); 
    background-blend-mode: multiply; 
} 

इस के साथ समस्या यह एक सीएसएस पृष्ठभूमि छवि स्टाइल रहा हूँ कि ग्रेस्केल फिल्टर मिश्रण मोड के लिए लाल रंग desaturating समाप्त होता है। दूसरे शब्दों में, गुणा पहले और फिर ग्रेस्केल होता है। मैं इसे कैसे स्विच करूं ताकि ग्रेस्केल पहले लागू हो और फिर मिश्रण मोड दूसरे पर लागू हो?

मैंने कोड और स्क्रीनशॉट (फ़ोटोशॉप में बने) के लिए एक बेवकूफ (http://jsfiddle.net/g54LcoL1/1/) बनाया है, जो कि मुझे परिणामस्वरूप दिखने की अपेक्षा की जाएगी। नीचे सबसे अधिक छवि, div.grayscale.multiply, रंग लाल होना चाहिए।

Answer 1

आप फिल्टर के साथ यह नहीं कर सकते, लेकिन आप इसे सब कुछ

के लिए मिश्रण मोड के साथ रह कर सकते हैं मिश्रण में ग्रेस्केल बराबर, चमक है स्रोत के रूप में छवि और एक ठोस सफेद पृष्ठभूमि के रूप में साथ

तो नीचे से पृष्ठभूमि छवियों, शीर्ष पर, कर रहे हैं:

1. सफेद (पृष्ठभूमि रंग के रूप में)
2. अपनी छवि
3. सोली चमक घ लाल

और मिश्रण मोड (है कि अब के लिए एक ढाल के रूप में निर्दिष्ट किया जाना चाहिए) कर रहे हैं और

.test { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg"); 
 
    background-color: white; 
 
    background-blend-mode: multiply, luminosity; 
 
    background-size: cover; 
 
}

<div class="test"></div>

Answer 2

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

छवि संदर्भों के लिए एक प्रस्तावित फ़िल्टर() फ़ंक्शन है, इसलिए सिद्धांत में, आप किसी भी छवि को लोड होने पर फ़िल्टर लागू करने में सक्षम होना चाहिए। मुझे लगता है कि इस विचार है:

.someclass { 
    background-image: filter(cat.jpg, grayscale(100%)); 
    background-color: red; 
    background-blend-mode: multiply; 
} 

दुःख की बात है मुझे नहीं लगता कि यह कहीं भी अभी तक कार्यान्वित किया जाता है, यह सिर्फ फिल्टर कल्पना की मसौदा संस्करण में है।

सामान्यतः, इन प्रकार के "पोस्ट-प्रोसेसिंग" सीएसएस प्रभावों के संदर्भ में संचालन के क्रम को उसी क्रम में परिभाषित किया जाता है जैसे एसवीजी: फ़िल्टरिंग पहले किया जाता है, फिर क्लिपिंग, फिर मास्किंग, फिर मिश्रण।

(Blending & Compositing Spec. देखें) तो, ऐसा करने के मामले में आप कुछ भी नहीं कर सकते हैं, मुझे डर है।

Answer 3

गुणा योएल स्वीकार किए जाते हैं जवाब के तहत अपने टिप्पणी में उल्लेख किया , mix-blend-mode का उपयोग करके ऐसा करना संभव है।

मेरे उदाहरण में मैं पृष्ठभूमि छवि की बजाय वास्तविक छवि का उपयोग करने जा रहा हूं। अगर इसे पृष्ठभूमि छवि होना है तो आप अभी भी उसी तकनीक का उपयोग कर सकते हैं। बस छवि को एक खाली div के साथ प्रतिस्थापित करें जिसमें पृष्ठभूमि छवि स्टाइल है।

इसके अलावा मैं "गुणा" के बजाय "स्क्रीन" मिश्रण मोड का उपयोग करने जा रहा हूं क्योंकि यह रंग हटाने को और अधिक स्पष्ट रूप से प्रदर्शित करता है।

.image-wrapper { 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
.image-wrapper img { 
 
    mix-blend-mode: screen; 
 
    filter: grayscale(100%); 
 
}

<div class="image-wrapper"> 
 
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/> 
 
</div>

रंग हटाने के बिना::

.image-wrapper { 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
.image-wrapper img { 
 
    mix-blend-mode: screen; 
 
}

<div class="image-wrapper"> 
 
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/> 
 
</div>

रंग हटाने के साथ

अधिक जानकारी यहां पाया जा सकता है:

https://css-tricks.com/almanac/properties/m/mix-blend-mode/