CSS ফিল্টার প্রতিশব্দ

  • পূর্বপাশ empty-cells
  • পরবর্তী পৃষ্ঠা flex

নির্দেশ ও ব্যবহার

filter প্রতিশব্দ এলিমেন্ট (সাধারণত <img>) এর দৃশ্যপ্রদর্শন নির্দেশ করে (যেমন ভুলা ও সততা)

আরও দেখুন:

CSS শিক্ষাক্রম:CSS ছবি

HTML DOM পরিচ্ছেদ হান্ডবুক:filter প্রতিশব্দ

ইনস্ট্যান্স

সব ছবিগুলোকে শ্বেত-কালো (100% গ্রেইশার) করুন:

img {
  filter: grayscale(100%);
}

আপনাদের নিজেরা প্রয়াস করুন

পরামর্শ:পৃষ্ঠার নিচের দিকে আরও TIY ইনস্ট্যান্স পাবেন

CSS য়াক্রণ

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

পরামর্শ:如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。

যদি একাধিক ফিল্টার ব্যবহার করতে হয়, তবে প্রত্যেক ফিল্টারকে স্পেস দিয়ে আলাদা করুন (দেখুন পানের নিচের আরও উদাহরণ)।

প্রযুক্তিগত বিবরণ ফিল্টার
ডিফল্ট মান: অনুগতি:
উত্তরসূরী: নাঅ্যানিমেশন নির্মাণ:。
সমর্থন: অ্যানিমেশন সংক্রান্ত বৈশিষ্ট্য
সংস্করণ: CSS3

JavaScript গ্রামার:

মন্তব্য:object.style.filter="grayscale(100%)"

ফিল্টার ফাংশন শতকরা মান (উদাহরণস্বরূপ 75％) ব্যবহার করা ফিল্টার, এটি দশমিক (উদাহরণস্বরূপ 0.75) নাও স্বীকৃত
ফিল্টার বর্ণনা
none

ডিফল্ট মান।কোনও প্রভাব নির্দিষ্ট করুন。

blur(px)
যদি নির্দিষ্ট মান হোক, 0 ব্যবহার করা হবে。

brightness(%)

  • 0％ ছবিকে সম্পূর্ণভাবে কালো করবে。
  • ডিফল্ট মান 100％, এটি প্রথমবারের মতো ছবিকে প্রতিনিধিত্ব করে。
  • মান 100％ বেশি আরও উজ্জ্বল ফলাফল প্রদান করবে。
contrast(%)

ছবির কন্ট্রাস্ট সংযোজন করুন。

  • 0％ ছবিকে সম্পূর্ণভাবে কালো করবে。
  • ডিফল্ট মান 100％, এটি প্রথমবারের মতো ছবিকে প্রতিনিধিত্ব করে。
  • 100％ বেশি মান আরও বেশি কন্ট্রাস্টিং ফলাফল প্রদান করবে。
drop-shadow(h-shadow v-shadow blur spread color)

ছবিতে ছাড়াটি যোগ করুন。

সম্ভাব্য মান:

  • h-shadow - অপশনাল।এটি হলসমান ছাড়াটির পিক্সেল মান নির্দিষ্ট করে।নেগেটিভ মান ছাড়াটিকে ছবির বামে স্থাপন করবে।
  • v-shadow - অপশনাল।এটি ভিক্টরিয়াল ছাড়াটির পিক্সেল মান নির্দিষ্ট করে।নেগেটিভ মান ছাড়াটিকে ছবির উপর স্থাপন করবে।

blur - অপশনাল।এটি তৃতীয় মান, ইউনিটটি পিক্সেলের মতো।ছাড়াটির অস্পষ্টতা যোগ করুন।মানটি বাড়ালে অস্পষ্টতা বাড়বে (ছাড়াটি আরও বড় এবং আরও উজ্জ্বল)।নেগেটিভ মান অনুমোদিত নয়।যদি মান নির্দিষ্ট না হয়, 0 (ছাড়াটির মাঝবর্তী শৃঙ্গার কম) ব্যবহার করা হবে।

spread - অপশনাল।এটি চতুর্থ মান, ইউনিটটি পিক্সেলের মতো।পজিটিভ মান ছাড়াটি বিস্তৃত এবং বৃদ্ধি করবে, নেগেটিভ মান ছাড়াটিকে সস্তানা করবে।যদি মান নির্দিষ্ট না হয়, 0 (ছাড়াটির মাপ সমান) ব্যবহার করা হবে।

মন্তব্য:Chrome, Safari এবং Opera, এবং প্রভূত অন্যান্য ব্রাউজার, চতুর্থ দৈর্ঘ্যকে সমর্থন করে না; যদি যোগ করা হয়, তবে তা প্রদর্শিত হবে না।

color - অপশনাল।ছাড়াটির রঙ যোগ করুন।যদি নির্দিষ্ট না হয়, তবে রঙ ব্রাউজারের উপর নির্ভর করে (সাধারণত কালো)।

এই উদাহরণটি লাল ছাড়াটি তৈরি করে, হলসমান এবং ভিক্টরিয়াল দিকে 8px, 10px অস্পষ্টতা প্রভাব সহ:

filter: drop-shadow(8px 8px 10px red);

পরামর্শ:এই ফিল্টার box-shadow অ্যাট্রিবিউটের অনুরূপ
grayscale(%);

ছবিকে গ্রেয়ার করুন。

  • 0% (0) পূর্বনির্ধারিত মান, যা মৌলিক ছবিকে প্রতিনিধিত্ব করে。
  • 100% ছবিকে সম্পূর্ণ গ্রেয়ার করবে (শ্বেত-কালো ছবিতে ব্যবহার করা হয়)

মন্তব্য:নেতিবাচক মান অনুমদিত নয়।
hue-rotate(deg);

ছবিতে রঙবোগ ঘুর্ণান্ত প্রয়োগ করুন। এই মান রঙবোগ চক্রের ডিগ্রি নির্ধারণ করে। পূর্বনির্ধারিত মান 0deg, যা মৌলিক ছবিকে প্রতিনিধিত্ব করে。

মন্তব্য:সর্বোচ্চ মান 360deg
invert(%);

ছবিতে নমুনা রিভার্স করুন。

  • 0% (0) পূর্বনির্ধারিত মান, যা মৌলিক ছবিকে প্রতিনিধিত্ব করে。
  • 100% ছবিকে সম্পূর্ণ রিভার্স করবে。

মন্তব্য:নেতিবাচক মান অনুমদিত নয়।
opacity(%);

ছবির অস্তর স্তর সংজ্ঞা করুন। opacity-level এটি স্বচ্ছতা স্তরকে বর্ণনা করে, যার মধ্যে:

  • 0% সম্পূর্ণ স্বচ্ছতা
  • 100% (1) পূর্বনির্ধারিত মান, যা মৌলিক ছবিকে (অস্তর) প্রতিনিধিত্ব করে。

মন্তব্য:নেতিবাচক মান অনুমদিত নয়।

পরামর্শ:এই ফিল্টার opacity অ্যাট্রিবিউটের অনুরূপ
saturate(%);

ছবির স্যাটুরেশন সংজ্ঞা করুন。

  • 0% (0) 0% স্যাটুরেশন ছবিকে প্রদান করবে。
  • 100% পূর্বনির্ধারিত মান এবং মৌলিক ছবিকে প্রতিনিধিত্ব করে。
  • 100% বেশি মান সুপার স্যাটুরেশন ফলাফল প্রদান করে。

মন্তব্য:নেতিবাচক মান অনুমদিত নয়।
sepia(%);

ছবিকে ককি হিসাবে পরিবর্তন করুন。

  • 0% (0) পূর্বনির্ধারিত মান, যা মৌলিক ছবিকে প্রতিনিধিত্ব করে。
  • 100％ ছবিকে সম্পূর্ণ ককি হিসাবে পরিবর্তন করবে。

মন্তব্য:নেতিবাচক মান অনুমদিত নয়।
url();

url() ফাংশন একটি SVG ফিল্টারের XML ফাইলের অবস্থান নিয়ে আসে এবং এটি একটি নির্দিষ্ট ফিল্টার ইলেকট্রনের ট্যাগস্ট্রিং অন্তর্ভুক্ত করতে পারে। উদাহরণ:

filter: url(svg-url#element-id);
initial এই অ্যাট্রিবিউটকে প্রবণ মানে সংস্থান করুন। দেখুন initial。
inherit এই অ্যাট্রিবিউটটি পিতৃ ইলেকট্রনের থেকে উত্তরণ করুন। দেখুন inherit。

আরও প্রদর্শন

অপসারণ প্রদর্শন

ছবিতে অপসারণ প্রভাব যোগ করুন:

img {
  filter: blur(5px);
}

আপনাদের নিজেরা প্রয়াস করুন

অপসারণযোগ্য প্রদর্শন 2

অপসারণযোগ্য পটভূমি ছবি প্রয়োগ করুন:

img.background {
  filter: blur(35px);
}

আপনাদের নিজেরা প্রয়াস করুন

আলোকমান প্রদর্শন

ছবির আলোকমান সংশোধন করুন:

img {
  filter: brightness(200%);
}

আপনাদের নিজেরা প্রয়াস করুন

কনট্রাস্ট প্রদর্শন

ছবির কনট্রাস্ট সংশোধন করুন:

img {
  filter: contrast(200%);
}

আপনাদের নিজেরা প্রয়াস করুন

শাড়া প্রভাব প্রদর্শন

ছবিতে শাড়া প্রভাব প্রয়োগ করুন:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

আপনাদের নিজেরা প্রয়াস করুন

গ্রেস্কেল উদাহরণ

ছবিকে গ্রেস্কেল হিসাবে রূপান্তর করুন:

img {
  filter: grayscale(50%);
}

আপনাদের নিজেরা প্রয়াস করুন

রঙবোধক উদাহরণ

ছবিতে রঙবোধক রূপান্তর লাগান:

img {
  filter: hue-rotate(90deg);
}

আপনাদের নিজেরা প্রয়াস করুন

রূপান্তর উদাহরণ

ছবিতের নমুনা রূপান্তর করুন:

img {
  filter: invert(100%);
}

আপনাদের নিজেরা প্রয়াস করুন

অস্পষ্টতা উদাহরণ

ছবির অস্পষ্টতা মাত্রা সংযোজন করুন:

img {
  filter: opacity(30%);
}

আপনাদের নিজেরা প্রয়াস করুন

সততা উদাহরণ

ছবির সততা সংযোজন করুন:

img {
  filter: saturate(800%);
}

আপনাদের নিজেরা প্রয়াস করুন

কালোচবি উদাহরণ

ছবিকে কালোচবি হিসাবে রূপান্তর করুন:

img {
  filter: sepia(100%);
}

আপনাদের নিজেরা প্রয়াস করুন

বহুসংখ্যক ফিল্টার ব্যবহার

একাধিক ফিল্টার ব্যবহার করতে, প্রত্যেক ফিল্টারকে স্পেস দিয়ে আলাদা করুন। প্রতিরক্ষা করুন, ক্রমবর্ধমান হয় (উদাহরণস্বরূপ, sepia() পরে grayscale() ব্যবহার করলে সম্পূর্ণভাবে গাঢ় ছবি পাওয়া যাবে):

img {
  filter: contrast(200%) brightness(150%);
}

আপনাদের নিজেরা প্রয়াস করুন

সমস্ত ফিল্টার

সমস্ত ফিল্টার ফাংশনগুলি প্রদর্শন করুন:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

আপনাদের নিজেরা প্রয়াস করুন

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই এক্সপ্রেশনকে পূর্ণাত্মকভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে।

যেসব সংখ্যা -webkit- দ্বারা সম্পৃক্ত, তা প্রথম সংস্করণকে প্রতীক্ষা করে যা প্রিফিক্স ব্যবহার করে।

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

মন্তব্য:পুরানো সংস্করণের Internet Explorer (4.0 থেকে 8.0) বর্জিত অবিশেষণ "filter" এক্সপ্রেশনকে সমর্থন করে।IE8 এবং তার আগের সংস্করণকে সমর্থন করার জন্য, এটি সাধারণত অস্পষ্টতা মূল্য হিসাবে ব্যবহৃত হয়。

  • পূর্বপাশ empty-cells
  • পরবর্তী পৃষ্ঠা flex