HTML DOM শৈলী ফিল্টার বৈশিষ্ট্য একটি উপাদানের ভিজ্যুয়াল প্রভাব সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়৷
−
-এর সিনট্যাক্স নিচে দেওয়া হলফিল্টার প্রপার্টি সেট করা হচ্ছে −
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
উপরের সম্পত্তির মানগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| ফিল্টার | বর্ণনা |
|---|---|
| কোনও নয়৷ | এটি কোনো প্রভাব নির্দিষ্ট করে না৷ |
| ব্লার(px) | এটি অস্পষ্ট প্রভাব প্রয়োগ করে৷ |
| উজ্জ্বলতা(%) | চিত্রের উজ্জ্বলতা সামঞ্জস্য করার জন্য৷ 100% (মূল চিত্র) থেকে উপরে মান নেয়। |
| কন্ট্রাস্ট(%) | চিত্রের বৈসাদৃশ্যের জন্য সামঞ্জস্য করা। 0% (পুরোপুরি কালো), 100% (আসল ছবি) থেকে মান নেয় এবং 100% এর উপরে এটি কম বৈসাদৃশ্য হবে.. |
| ড্রপ-শ্যাডো(h-shadowv-শ্যাডো ব্লার স্প্রেড রঙ) | একটি ছবিতে ড্রপ শ্যাডো প্রয়োগ করার জন্য৷ |
| ধূসর স্কেল(%) | ছবিকে গ্রেস্কেলে রূপান্তর করার জন্য 0% আসল চিত্রের প্রতিনিধিত্ব করে এবং 100% এটিকে সম্পূর্ণ ধূসর করে তোলে৷ |
| হ্যু-রোটেট(ডিগ্রি) | প্রদত্ত অ্যাসপ্যারামিটারের সাথে চিত্রে রঙের ঘূর্ণনের জন্য প্রয়োগ করা। ডিফল্ট মান হল 0 ডিগ্রী যা আসল চিত্রকে উপস্থাপন করে এবং 360 ডিগ্রী পর্যন্ত যেতে পারে। |
| উল্টানো(%) | চিত্রের নমুনাগুলিকে উল্টানোর জন্য৷ |
| অস্বচ্ছতা(%) | 0% (সম্পূর্ণ স্বচ্ছ) থেকে 100% (মূল চিত্র এবং ডিফল্ট মান) পর্যন্ত ছবির জন্য অস্বচ্ছতা স্তর ফরসেটিং করা। |
| স্যাচুরেট (%) | চিত্রটিকে স্যাচুরেট করে৷ |
| সেপিয়া(%) | ছবিটিকে সেপিয়াতে রূপান্তর করুন৷ |
ফিল্টার প্রপার্টি −
এর জন্য একটি উদাহরণ দেখা যাকউদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: hue-rotate(90deg);
}
</style>
<script>
function changeFilter() {
document.getElementById("one").style.filter ="sepia(40%)";
document.getElementById("Sample").innerHTML="The grayscale filter is now applied to above image";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics- mini-logo.jpg">
<p>Change the above image filter property by clicking the below button</p>
<button onclick="changeFilter()">Change Filter</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
“পরিবর্তন ফিল্টার এ ক্লিক করলে ” বোতাম -
