این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع contrast در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع contrast در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع contrast در CSS
با استفاده از تابع contrast در CSS میتوان یک افکت ( Effect ) ( کنتراست یا تضاد ) را بروی عناصر ( معمولا و بیشتر تصاویر ) ایجاد و یا تعریف نمود.
این تابع در ویژگی filter مورد استفاده قرار میگیرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع contrast در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
|
1 2 3 |
img.f1{ filter: contrast(20%); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع contrast در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()contrast | ۱۸ | ۳۵ | ۱۵ | ۶ | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
contrast( <number> یا <percentage> ); |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| <number> | یک مقدار عددی از ۰٫۰ تا ۱ به بالا مثال :
|
||
| <percentage> | یک مقدار درصدی از ۰% تا ۱۰۰% به بالا مثال :
|
Free-Learn
نکات و توضیحات
- از مقادیر منفی نمیتوان در این تابع استفاده کرد.
