সিএসএসে কীভাবে চিত্রের উজ্জ্বলতা হ্রাস করবেন

105

আমি সিএসএসে চিত্রের উজ্জ্বলতা হ্রাস করতে চাই। আমি অনেকগুলি অনুসন্ধান করেছি কিন্তু আমি যা কিছু পেয়েছি তা হল কীভাবে অস্বচ্ছতা পরিবর্তন করতে হয় তবে এটি চিত্রটিকে আরও উজ্জ্বল করে তোলে। আমাকে কি কেউ সাহায্য করতে পারবেন ?

css

— শাদি
সূত্র

আপনি অ্যাট্রিবিউট

— अस्पष्टি

আমি এটি ব্যবহার করেছি তবে এটি উজ্জ্বলতা বাড়ায় ...

— শাদি

গৃহীত উত্তরটি ভাল কাজ করে তবে একটি নতুন সিএসএস স্ট্যান্ডার্ড filterএফেক্টও রয়েছে যা আপনি ভবিষ্যতের জন্য সচেতন হতে চাইবেন। আমার উত্তর দেখুন।

— স্পডলি

1

@ শ্যাডি, আপনি কি ফিল্টার জড়িত এমন সমাধানগুলির সমাধান হিসাবে উত্তরগুলির একটি চিহ্নিত করতে দয়া করে এই প্রশ্নটি পুনর্বিবেচনা করতে পারেন। আপনি যে উত্তরটি সঠিক হিসাবে চিহ্নিত করেছেন তা

— হ'ল

175

আপনি যে বৈশিষ্ট্যটি সন্ধান করছেন তা হ'ল filter। এটি উজ্জ্বলতা সহ বিভিন্ন ধরণের চিত্রের প্রভাবগুলি করতে সক্ষম:

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

আপনি এটি সম্পর্কে এখানে একটি সহায়ক নিবন্ধটি খুঁজে পেতে পারেন: http://www.html5rocks.com/en/tutorials/filters/:30 বোঝার-css/

আরেকটি: http://davidwalsh.name/css-filters

এবং সবচেয়ে গুরুত্বপূর্ণ, ডাব্লু 3 সি চশমা: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

দ্রষ্টব্য এটি এমন একটি যা খুব সম্প্রতি সিএসএসে বৈশিষ্ট্য হিসাবে আসছে। এটা তোলে পাওয়া যাচ্ছে, কিন্তু সেখানে আউট ব্রাউজার সংখ্যক এখনো এটিকে সমর্থন করে না, করতে পারে এমন সমর্থন এটি একটি বিক্রেতা উপসর্গ (অর্থাত প্রয়োজন হবে -webkit-filter:, -moz-filterইত্যাদি)।

এসভিজি ব্যবহার করে এর মতো ফিল্টার প্রভাবগুলিও করা সম্ভব। এই প্রভাবগুলির জন্য এসভিজি সমর্থনটি সুপ্রতিষ্ঠিত এবং ব্যাপকভাবে সমর্থিত (সিএসএস ফিল্টার স্পেসগুলি বিদ্যমান এসভিজি চশমা থেকে নেওয়া হয়েছে)

এছাড়াও নোট করুন যে এটি filterআইই এর পুরানো সংস্করণগুলিতে উপলব্ধ মালিকানাধর্মী শৈলীর সাথে বিভ্রান্ত হওয়ার দরকার নেই (যদিও নতুন শৈলীর বিক্রেতার উপসর্গটি নামলে আমি নেমস্পেস সংঘর্ষের সাথে কোনও সমস্যার পূর্বাভাস দিতে পারি)।

যদি এর কোনওটিই আপনার পক্ষে কাজ করে না, আপনি এখনও বিদ্যমান opacityবৈশিষ্ট্যটি ব্যবহার করতে পারেন , তবে আপনি যেভাবে ভাবছেন তা নয়: কেবল একটি গা dark় রঙের সাথে একটি নতুন উপাদান তৈরি করুন, আপনার চিত্রের উপরে রাখুন এবং এটি ব্যবহার করে বিবর্ণ করুন opacity। অন্ধকার হওয়ার পিছনে প্রভাবটি হবে চিত্রটির।

অবশেষে আপনি filter এখানে ব্রাউজার সমর্থন পরীক্ষা করতে পারেন ।

— Spudley
সূত্র

32

ওপি উজ্জ্বলতা হ্রাস করতে চায় , এটি বাড়াতে চায় না। অস্বচ্ছতা চিত্রটি আরও উজ্জ্বল দেখায়, গাer় নয়।

আপনি ইমেজটির উপর একটি কালো ডিভকে ওভারলেল করে এবং সেই ডিভের অস্বচ্ছতা সেট করে এটি করতে পারেন।

<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

অস্বচ্ছতা কিছু উজ্জ্বল বা গাer় করে না। এটি বস্তুর স্বচ্ছতা পরিবর্তন করে। এতে আরও উজ্জ্বল বা গাer় কিছু তৈরি করার প্রভাব রয়েছে কিনা তা আপনার আইটেমটির অস্বচ্ছতাটি পরিবর্তন করার পেছনের পটভূমির রঙের উপর নির্ভর করবে। আপনি যা বলছেন তার বিপরীতে, আপনি যদি কালো পটভূমিতে রাখেন তবে অস্বচ্ছতা বাড়িয়ে আপনি কিছু গাer় করতে পারেন। একটি কালো পটভূমিতে একটি 99% স্বচ্ছ চিত্র প্রায় কালো প্রদর্শিত হবে। আমি তাই না, কেন পৃথক ওভারলে ডিভ প্রয়োজন see আপনি কেবল এটি একটি কালো বিজি তে সেট করতে পারেন। যেমন: jsbin.com/isemec/1/edit

— নিকজি

@ নিকজি আমি বলেছিলাম যে সাদা ব্যাকগ্রাউন্ড ধরে। আপনি যা করেছেন তা আমার কোডের মতো একই জিনিস, কেবলমাত্র আমি ইমেজের উপরে একটি অর্ধ-স্বচ্ছ কালো ওভারলে রাখি এবং উপরে একটি অর্ধ-স্বচ্ছ চিত্রযুক্ত আপনার একটি অস্বচ্ছ কালো পটভূমি রয়েছে।

— সত্যেনেন

17

সংক্ষেপে, চিত্রের পিছনে কালো রাখুন, এবং opactiy কম করুন। আপনি একটি ডিভের মধ্যে চিত্রটি মোড়ানো এবং তারপরে চিত্রটির অস্বচ্ছতা কমিয়ে এটি করতে পারেন।

উদাহরণ স্বরূপ:

<!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>

এখানে একটি জেএসফিডাল।

— JL235
সূত্র

15

আপনি ব্যবহার করতে পারেন:

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

— নাহমো এতিয়াস
সূত্র

9

"আসুন কেবলমাত্র ক্ষেত্রে প্রিফিক্স নিক্ষেপ করুন" এই নীতিটি ভুল। প্রথমত, অপেরা যদি কখনও এটি সমর্থন করে তবে তা তা পাবে না -o-(অপেরা এখন ওয়েবকিট / ব্লিঙ্ক ব্যবহার করে), দ্বিতীয়ত, ফায়ারফক্স সরাসরি প্রি-ফিক্সডে ঝাঁপিয়ে পড়েছে filter, তৃতীয়, আপনার অর্ডারটি ভুল আছে, প্রি-ফিক্সডটি শেষ হওয়া উচিত, চতুর্থ, আইই এর সিনট্যাক্স -ms-filterআলাদা ( progid:DXImageTransformইত্যাদি), পঞ্চম, ফায়ারফক্সের সিনট্যাক্স আলাদা এবং এসভিজি প্রয়োজন ( ডক্স দেখুন ), ষষ্ঠ, নতুন বৈশিষ্ট্যগুলির উপসর্গ হওয়ার সম্ভাবনা নেই কারণ বিক্রেতারা বুঝতে পেরেছিলেন যে এটির ধারণাটি কতটা খারাপ

— ক্যামিলো মার্টিন

5

@ ক্যামিলোমার্টিন, তারপরে আপনার এই প্রশ্নের আরও একটি সম্পূর্ণ উত্তর দেওয়া উচিত ছিল কারণ এটি এখনও পুরোপুরি উত্তর দেওয়া হয়নি answered

— ওয়েস মোডগুলি

-উইবকিট-ফিল্টার: উজ্জ্বলতা () / -উইবকিট-ফিল্টার: বিপরীতে () কাজ করে। এটি প্রশ্নের উপযুক্ত উত্তর is

— শিল্পা

আপনি এটি এর মতো সাস মিক্সিনে

— লাইবারম্যান

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

আপনার যদি ব্যাকগ্রাউন্ড-চিত্র থাকে তবে আপনি এটি করতে পারেন: পটভূমির চিত্রটিতে একটি rgba () গ্রেডিয়েন্ট সেট করুন।

.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>

স্নিপেট প্রসারিত করুন

— সাবাস্তিয়ান জিক্কেল
সূত্র

চমৎকার। আমার একটি পটভূমি চিত্র অন্ধকার করার জন্য একটি সমাধান প্রয়োজন এবং অন্য সমস্ত উত্তর পুরো ডিভকে অন্ধকার করে।

— নুয়ান্ডার

1

আপনি সিএসএস ফিল্টারগুলি নীচে এবং ওয়েব-কিটের জন্য উদাহরণস্বরূপ ব্যবহার করতে পারেন। দয়া করে এই উদাহরণটি দেখুন: 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;
}

— সতীন্দর সিংহ
সূত্র

ধন্যবাদ তবে উজ্জ্বলতা বাড়ছে তা কমছে না !!

— শাদি

এটি পটভূমির রঙের উপর নির্ভর করে।

— রহস্যোদ্ঘাটন

ডান @ zgnilec এটি পটভূমির রঙের উপর নির্ভর করে ... আপনি যদি এটি কালো রাখেন তবে চিত্রটির উজ্জ্বলতা হ্রাস পাবে

— শাদি

এটি 100% এরও বেশি সময়ের জন্য উজ্জ্বলতা বাড়ানোর পক্ষে কাজ করে না, অস্বচ্ছতা কেবল 1 পর্যন্ত পেতে পারে

— জাভিস পেরেজ

অ-ইংরাজী স্পিকার হওয়ার কারণে আমি আসলে "ধোঁক" জন্য অনুসন্ধান করতে চেয়েছিলাম এবং যাইহোক এই উত্তরটির প্রস্তাব দেওয়া হয়েছিল। এমনকি যদি এই উত্তরটি প্রশ্নের উত্তর না দেয় তবে এটি জানা ভাল যে opacityউজ্জ্বলতা বাড়ায়। ;)