CSS में Image Brightness कैसे कम करें

105

मैं CSS में इमेज ब्राइटनेस कम करना चाहता हूँ। मैंने बहुत खोज की लेकिन मुझे जो कुछ मिला है वह अस्पष्टता को बदलने के बारे में है, लेकिन यह छवि को अधिक उज्ज्वल बनाता है। क्या कोई मेरी मदद कर सकता है ?

css

— शादी
स्रोत

आप विशेषता अस्पष्टता का उपयोग कर सकते हैं

— सतिंदर सिंह

मैंने इसका इस्तेमाल किया लेकिन यह चमक को बढ़ाता है ...

— Shadi

स्वीकृत उत्तर अच्छी तरह से काम करता है, लेकिन एक नया सीएसएस मानक filterप्रभाव भी है जिसे आप भविष्य के लिए जागरूक करना चाहेंगे। मेरा जवाब देखिए।

— स्पडली

1

@shady, क्या आप इस प्रश्न को फिर से देख सकते हैं कि उत्तरों में से किसी एक को चिह्नित करने के लिए समाधानों को शामिल किया गया है। आपने जो उत्तर सही बताया है, वह 2006 में कहने का तरीका होगा।

— वेस मोड्स

175

वह सुविधा जो आप ढूंढ रहे हैं filter। यह चमक सहित कई छवि प्रभावों को करने में सक्षम है:

#myimage {
    filter: brightness(50%);
}

आप इसके बारे में एक उपयोगी लेख यहां पा सकते हैं: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

एक अन्य: http://davidwalsh.name/css-filters

और सबसे महत्वपूर्ण बात, W3C चश्मा: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

ध्यान दें कि यह एक ऐसी विशेषता है जो हाल ही में सीएसएस में एक विशेषता के रूप में आ रही है। यह उपलब्ध है, लेकिन वहाँ ब्राउज़रों की एक बड़ी संख्या अभी तक समर्थन नहीं जाएगा, और उन है कि समर्थन यह एक विक्रेता उपसर्ग (यानी की आवश्यकता होगी -webkit-filter:, -moz-filter, आदि)।

एसवीजी का उपयोग करके इस तरह से फिल्टर प्रभाव करना भी संभव है। इन प्रभावों के लिए एसवीजी समर्थन अच्छी तरह से स्थापित है और व्यापक रूप से समर्थित है (सीएसएस फिल्टर चश्मा मौजूदा एसवीजी चश्मा से लिया गया है)

यह भी ध्यान दें कि यह filterIE के पुराने संस्करणों में उपलब्ध मालिकाना शैली के साथ भ्रमित होने की नहीं है (हालांकि मैं नई नाम के विक्रेता के उपसर्ग को छोड़ने पर नाम स्थान टकराव के साथ एक समस्या की भविष्यवाणी कर सकता हूं)।

यदि आप में से कोई भी आपके लिए काम नहीं करता है, तो आप अभी भी मौजूदा opacityसुविधा का उपयोग कर सकते हैं, लेकिन जिस तरह से आप सोच रहे हैं वह नहीं: बस एक ठोस काले रंग के साथ एक नया तत्व बनाएं, इसे अपनी छवि के ऊपर रखें, और इसका उपयोग करके फीका करें opacity। असर अंधेरा होने के पीछे की छवि का होगा।

अंत में आप filter यहाँ के ब्राउज़र समर्थन की जाँच कर सकते हैं ।

— Spudley
स्रोत

32

ओपी घटाना चाहता है चमक , इसे बढ़ाना नहीं। अस्पष्टता छवि को उज्जवल बनाती है, गहरा नहीं।

आप छवि पर एक काली div ओवरले करके और उस div की अस्पष्टता सेट करके ऐसा कर सकते हैं।

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

डेमो

— sachleen
स्रोत

24

अस्पष्टता कुछ भी उज्जवल या गहरा नहीं बनाती है। यह वस्तु की पारदर्शिता को बदल देता है। कुछ उज्जवल या गहरा बनाने का प्रभाव पड़ता है या नहीं, यह उस वस्तु के पीछे की पृष्ठभूमि के रंग पर निर्भर करेगा जो आप अस्पष्टता को बदल रहे हैं। आप जो कहते हैं उसके विपरीत, यदि आप इसे काली पृष्ठभूमि पर रखते हैं, तो आप अस्पष्टता को बढ़ाकर कुछ गहरा कर सकते हैं। एक काले रंग की पृष्ठभूमि पर 99% पारदर्शी छवि लगभग काली दिखाई देगी। इसलिए मैं नहीं देखता कि एक अलग ओवरले डिव की आवश्यकता क्यों है। आप बस इसे एक काले बीजी पर सेट कर सकते हैं। उदाहरण के लिए: jsbin.com/isemec/1/edit

— NickG

@ नाइक मैंने कहा कि सफेद पृष्ठभूमि को देखते हुए। आपने जो किया है वह मेरे कोड के समान है, केवल मैंने छवि के शीर्ष पर एक अर्ध-पारदर्शी ब्लैक ओवरले रखा है और आपके पास शीर्ष पर एक अर्ध-पारदर्शी छवि के साथ एक अपारदर्शी काली पृष्ठभूमि है।

— साचलेन

17

संक्षेप में, छवि के पीछे काले रंग को रखें, और ओपैक्टी को कम करें। आप एक div के भीतर छवि को लपेटकर और फिर छवि की अस्पष्टता को कम करके ऐसा कर सकते हैं।

उदाहरण के लिए:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

यहाँ एक JSFiddle है।

— JL235
स्रोत

15

आप उपयोग कर सकते हैं:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);

— नहोमी अटियास
स्रोत

9

"केवल मामले में उपसर्गों को फेंक दें" की यह नीति गलत है। पहला, यदि ओपेरा कभी भी इसका समर्थन करता है, तो यह नहीं होगा -o-(ओपेरा वेबकिट / ब्लिंक का उपयोग करता है), दूसरा, फ़ायरफ़ॉक्स सीधे गैर-उपसर्ग में कूद गया filter, तीसरा, आपके पास आदेश गलत है, गैर-उपसर्ग अंतिम एक होना चाहिए, चौथा, IE के लिए सिंटैक्स -ms-filterअलग है ( progid:DXImageTransform, आदि), पांचवें, फ़ायरफ़ॉक्स के लिए सिंटैक्स अलग है और SVG ( डॉक्स देखें ) की आवश्यकता है, छठे, नई सुविधाओं के लिए उपसर्ग होने की संभावना नहीं है क्योंकि विक्रेताओं को एहसास हुआ कि यह कितना बुरा विचार था

— कैमिलो मार्टिन

5

@CamiloMartin, तो आपको इस प्रश्न का अधिक पूर्ण उत्तर प्रदान करना चाहिए क्योंकि यह अभी तक पूरी तरह से उत्तर नहीं दिया गया है।

— वेस मोड्स

-webkit- फ़िल्टर: चमक () / -webkit- फ़िल्टर: कंट्रास्ट () काम करता है। यह प्रश्न का एक उपयुक्त उत्तर है।

— शिल्पा

आप इसे इस तरह से sass मिक्सिन

— Erez Lieberman

6

CSS3 के साथ हम आसानी से एक छवि को समायोजित कर सकते हैं। लेकिन याद रखें इससे छवि नहीं बदलती। यह केवल समायोजित छवि प्रदर्शित करता है।

अधिक जानकारी के लिए निम्न कोड देखें।

एक छवि ग्रे बनाने के लिए:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

सीपिया लुक देने के लिए:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

चमक को समायोजित करने के लिए:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

इसके विपरीत समायोजित करने के लिए:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

एक छवि को धुंधला करने के लिए:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }

— राज शर्मा
स्रोत

1

कृपया एकाधिक प्रश्नों के सटीक उत्तर न दें: यह या तो सभी के लिए अच्छा नहीं है या प्रश्न डुप्लिकेट हैं जिन्हें ध्वजांकित / बंद किया जाना चाहिए।

— क्लियोपेट्रा

3

मैंने आज यह पाया। इसने वास्तव में मेरी मदद की। http://www.propra.nl/playground/css_filters/

बस आपको अपनी सीएसएस शैली में इसे जोड़ना है।

div {-webkit-filter: brightness(57%)}

— मोशन में आत्मा
स्रोत

2

यदि आपके पास पृष्ठभूमि-छवि है, तो आप यह कर सकते हैं: पृष्ठभूमि-छवि पर एक आरजीबीए () ग्रेडिएंट सेट करें।

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}

<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

स्निपेट का विस्तार करें

— सेबास्टियन गिक्वेल
स्रोत

अति उत्कृष्ट। मुझे पृष्ठभूमि की छवि को गहरा करने के लिए एक समाधान की आवश्यकता थी और अन्य सभी उत्तर पूरे div को काला कर देते हैं।

— नौ

1

आप नीचे दिए गए css फ़िल्टर का उपयोग कर सकते हैं और वेब-किट के लिए उदाहरण दे सकते हैं। कृपया इस उदाहरण को देखें: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

— GibboK
स्रोत

0

-webkit-filter: brightness(0.50);

मैं इस शांत समाधान मिल गया है: https://jsfiddle.net/yLcd5z0h/

— प्रशांत घिमिरे
स्रोत

0

अगर आपको काली छवि को सफेद में बदलने की आवश्यकता है, तो यह कोशिश करें:

.classname{
    filter: brightness(0) invert(1);
}

— Rizo
स्रोत

-3

पसंद

.classname
{
 opacity: 0.5;
}

— सतिंदर सिंह
स्रोत

धन्यवाद, लेकिन यह चमक बढ़ाने के लिए इसे कम नहीं !!

— Shadi

यह पृष्ठभूमि के रंग पर निर्भर करता है।

— Apocalypse

सही @zgnilec इसकी पृष्ठभूमि रंग पर निर्भर करता है ... यदि आप इसे काला करते हैं तो छवि की चमक कम हो जाएगी

— Shadi

यह 100% से अधिक चमक बढ़ाने के लिए काम नहीं करता है, अपारदर्शिता केवल 1 तक जा सकती है

— जेविस पेरेज़

एक गैर-अंग्रेजी वक्ता होने के नाते, मैं वास्तव में "अस्पष्टता" की खोज करना चाहता था और इस उत्तर को वैसे भी प्रस्तावित करता था। भले ही यह जवाब सवाल का जवाब नहीं देता है, यह जानने के लिए अच्छा है कि opacityचमक बढ़ जाती है। ;)