सीएसएस

Question

के साथ एक छवि के एक भाग को ग्रे करें मैं एक छवि के एक खंड (बाएं और दाएं दो पट्टियों) को भूरे रंग की कोशिश कर रहा हूं। क्या सीएसएस का उपयोग करके ऐसा करने का कोई तरीका है?

मुझे पता है कि मैं फ़िल्टर का उपयोग कर सकता हूं (यानी filter: grayscale(100%)), लेकिन मैं नहीं चाहता कि पूरी छवि ग्रे हो।

Answer 1

बिना किसी अतिरिक्त मार्कअप के साथ शुद्ध सीएसएस समाधान

JSFIDDLE DEMO

एचटीएमएल

<div class="image-container"> 
    <img class="image-grey" src="http://placekitten.com/200/150" /> 
</div> 

सीएसएस

.image-container { 
    position:relative; 
    display:inline-block; 
} 

.image-grey { 
    display:block; 
    -webkit-filter: grayscale(100%); 
} 

.image-container:after { 
    position:absolute; 
    content:""; 
    top:0; 
    left:50%; 
     width:50%; 
    height:100%; 
    background-image:url(http://placekitten.com/200/150); 
    background-position:top right; 
} 

Answer 2

इसे एक div पर रखो।

<div id="wrapper"> 
    <img src="path/to/file.jpg" /> 
    <div id="filter"> 
</div> 
<style> 
#wrapper {position: relative;} 
#filter { 
    position: absolute; 
    top: 123px; 
    left: 123px; 
    width: 42px; 
    height: 42px; 
    background: rgba(255,0,0,0.5); 
} 
</style> 

http://jsfiddle.net/BQ7J3/

Answer 3

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

<div class="image-container"> 
    <img class="image-grey clip" src="http://placekitten.com/200/150" /> 
    <img class="image-coloured" src="http://placekitten.com/200/150" /> 
</div> 

और

.image-coloured { 
    z-index: 0; 
    position: absolute; 
} 

.image-grey { 
    z-index: 1; 
    position: absolute; 
    -webkit-filter: grayscale(100%); 
} 

.clip { 
    clip: rect(0px,60px,150px,0px) 
} 

Fiddle