স্টাইল ফিল্টার এট্রিবিউট

বিবরণ ও ব্যবহার

filter ছবিতে ভিন্ন ভিন্ন ইফেক্ট (যেমন ঝাঁঝাট ও সততা) যোগ করুন。

অন্যান্য দেখুন:

CSS পরিসংখ্যান হান্ডবুকফিল্টার এট্রিবিউট

উদাহরণ

ছবির রঙকে সাদা-কালো (১০০% গ্রেসেনশিয়া) করুন:

document.getElementById("myImg").style.filter = "grayscale(100%)";

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

সিন্ট্যাক্স

ফিল্টার এট্রিবিউট ফেরত দিন

অবজেক্ট.style.filter

ফিল্টার এট্রিবিউট সেট করুন:

অবজেক্ট.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

ফিল্টার ফাংশন

মন্তব্য:ফিল্টার এবং শতকরা মাপের (যেমন ৭৫%) filter-কেও দশমিক মান (অর্থাৎ ০.৭৫) গ্রহণ করে।

ফিল্টার বর্ণনা
নকো কোনো ইফেক্ট নেই。
blur(পিক্সেল)

ছবিতে ঝাঁঝাট ইফেক্ট আপলড করুন। বড় মানের ঝাঁঝাট আরও ঝাঁঝাট করবে।

如果未规定值，则使用 0。
ছবির আলোককারীতা সংযোজন করুন。%)

adjust brightness(

0% ছবিটিকে সম্পূর্ণভাবে কালো করবে。

100% (1) ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

100% বেশি মান আরও আলোককারী ফলাফল প্রদান করবে。
contrast(%)

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

0% ছবিটিকে সম্পূর্ণভাবে কালো করবে。

100% (1) ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

100% বেশি মান কম কনট্রাস্ট ফলাফল প্রদান করবে。
drop-shadow(h-shadow v-shadow blur spread color)

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

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

h-shadow - অপশনাল। এটি শীর্ষ মান, পিক্সেল ইউনিটে। শীর্ষ মান হোরিজন্টাল শেডোর পিক্সেল মান নির্দেশ করে। নেগেটিভ মান শেডোকে ছবির বামে স্থাপন করবে。

v-shadow - অপশনাল। এটি শীর্ষ মান, পিক্সেল ইউনিটে। শীর্ষ মান ভিক্টরিয়াল শেডোর পিক্সেল মান নির্দেশ করে। নেগেটিভ মান শেডোকে ছবির ওপরে স্থাপন করবে。

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

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

মন্তব্য:Chrome, Safari এবং Opera, এবং অন্যান্য ব্রাউজারগুলোও চতুর্থ মাপকাঠিতে সমর্থন করে না; যদি যোগ করা হয়, তবে এটি প্রদর্শিত হবে না。

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

টীকা:এই filter box-shadow প্রকারটির অনুরূপ।
grayscale(%)

ছবিটিকে গ্রেইস্কেল রঙে পরিবর্তন করুন。

0% (0) ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

100% ছবিটিকে সম্পূর্ণভাবে গ্রেইস্কেল রঙে পরিবর্তন করবে (সাদা-কমল ছবি)。

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

ছবিতে হ্যুমানসা রঙ ঘূর্ণন প্রয়োগ করুন। এই মান ছবির নমুনা কেন্দ্রস্থলের বর্ণঘিরের ডিগ্রি নির্দেশ করে。

0deg ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

মন্তব্য:সর্বোচ্চ মান 360 ডিগ্রি।
invert(%)

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

0% (0) ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

100% ছবিটিকে সম্পূর্ণভাবে পরিবর্তন করবে。

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

ছবির অস্বচ্ছতা স্তর সংযোজন করুন। অস্বচ্ছতা স্তর এসবচ্ছতা স্তরকে বর্ণনা করে, যেখানে:

0% সম্পূর্ণভাবে স্বচ্ছ হবে。

100% (1) ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে (অস্বচ্ছতা না) নির্দেশ করে。

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

টীকা:এই filter opacity প্রকারটির অনুরূপ।
saturate(%)

ছবির সংস্করণকারীতা সংযোজন করুন。

0% (0) ছবিটিকে সম্পূর্ণভাবে অসংস্করণকারী করবে。

100% ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

100% বেশি মান অত্যধিক সংস্করণকারী ফলাফল প্রদান করবে。

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

ছবিটিকে তাপকতা বৃদ্ধি করুন。

0% (0) ডিফল্ট মান এবং এটি প্রকৃত ছবিটিকে নির্দেশ করে。

100% তাপকতা বৃদ্ধি করবে এবং ছবিটিকে সম্পূর্ণভাবে কমলকমল রঙে পরিবর্তন করবে。

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

প্রযুক্তিগত বিবরণ

CSS সংস্করণ: CSS3

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

সারণীতে দেওয়া সংখ্যাগুলি এই এট্রিবিউটটি যারা প্রথম সম্পূর্ণরূপে সমর্থন করেছে, তার সংখ্যা দেখাচ্ছে。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0