सीएसएस के साथ एक छवि को अंधेरा करना (किसी भी आकार में)

Question

इसलिए मैंने सीएसएस के साथ छवियों को अंधेरे करने के कुछ तरीके देखे हैं, जिनमें गोलाकार कोनों वाले लोग शामिल हैं, लेकिन मेरी समस्या अलग है।

मान लें कि मेरे पास एक .png छवि है जो एक छोटे कुत्ते की तरह दिखती है (बस इसके साथ जाओ, मेरे पास कोई अच्छा उदाहरण नहीं है), जब मैं इसे अपने पृष्ठ पर रखता हूं, तो मैं इसे 100 x 100 के आयाम देता हूं

लेकिन मैं सिर्फ उस पर कुछ ओवरले नहीं कर सकता, या पूरी छवि को टिंट नहीं कर सकता, क्योंकि यह कुत्ते की पृष्ठभूमि को भी टिंटेड होने का कारण बनता है, जो बदसूरत दिखता है।

क्या सीएसएस के साथ मनमाने ढंग से आकार की छवि को टेंट करना संभव है?

(मैं तुम्हें मेरी बात समझ में यह सोचते हैं रहा हूँ, और बेकार कोड आवश्यक नहीं है)

धन्यवाद!

Answer 1

आप छवि के अस्पष्टता को हमेशा बदल सकते हैं, किसी भी विकल्प की कठिनाई को देखते हुए यह सबसे अच्छा तरीका हो सकता है।

सीएसएस:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

यदि आपके पास पर्याप्त निर्धारित कर रहे हैं तो आप इस जहाँ तक काम करना आरंभ कर सकते हैं:

.tinted { opacity: 0.8; } 

आप बेहतर ब्राउज़र संगतता में रुचि रखते हैं, मैं इस पढ़ने का सुझाव आईई 7 के रूप में वापस (जो जानता था!) ​​

नोट: जैसा कि जेगोन्ज़लेज़ डी नीचे बताता है, यह ऑनल वाई वास्तव में छवि को अंधेरा करता है अगर पृष्ठभूमि रंग आमतौर पर छवि की तुलना में गहरा होता है। यद्यपि यह तकनीक अभी भी उपयोगी हो सकती है यदि आप विशेष रूप से छवि को अंधेरा नहीं करना चाहते हैं, लेकिन इसके बजाय किसी भी कारण से होवर/फोकस/अन्य स्थिति पर इसे हाइलाइट करना चाहते हैं।

Answer 2

Webkit only solution

त्वरित समाधान, -webkit-mask-image संपत्ति पर निर्भर करता है। -webkit-mask-image किसी तत्व के लिए एक मुखौटा छवि सेट करता है।

इस विधि के साथ कुछ gotchas हैं: केवल वेबकिट ब्राउज़रों में काम करता है

• जाहिर है,
• एक अतिरिक्त आवरण आवश्यक है :after छद्म-तत्व लागू करने के लिए (IMG टैग नहीं हो सकते :before/:after छद्म तत्व, grr)
• क्योंकि एक अतिरिक्त रैपर है, मुझे यकीन नहीं है कि IMG टैग यूआरएल प्राप्त करने के लिए attr(…) सीएसएस फ़ंक्शन का उपयोग कैसे करें, इसलिए इसे सीएसएस में अलग-अलग कोड किया गया है।

यदि आप उन मुद्दों को देख सकते हैं, तो यह एक संभावित समाधान हो सकता है। एसवीजी फिल्टर और भी लचीले होंगे, और कैनवास समाधान और भी लचीले होंगे और समर्थन की विस्तृत श्रृंखला होगी (एसवीजी में एंड्रॉइड 2.x समर्थन नहीं है)।

Answer 3

मैं कुत्ते के सिल्हूट (काला) की एक नई छवि और शेष मूल छवि के समान ही बनाउंगा।एचटीएमएल में, पृष्ठभूमि के रूप में इस सिल्हूट के साथ एक रैपर div जोड़ें। अब, मूल छवि अर्द्ध पारदर्शी बनाओ। कुत्ता गहरा हो जाएगा और कुत्ते की पृष्ठभूमि वही रहेगी। आप कर सकते हैं: होवर पर मूल छवि की अस्पष्टता को 100% पर सेट करके चालें होवर करें। तब जब आप उसके ऊपर माउस करते हैं तो कुत्ता बाहर निकलता है!

शैली

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:} 
.original:hover{opacity:1} 

<div class="wrapper"> 
    <div class="img"> 
    <img src="original.png"> 
    </div> 
</div> 

Answer 4

आसान

img { 
    filter: brightness(50%); 
}