CSS فیلتر پرپرٹی

تعریف و استفاده

ویژگی فیلتر تعریف می‌کند اثرات ویژه‌ای را برای عناصر (معمولاً <img>) (مانند تار و پرنور بودن).

لطفاً به: مراجعه کنید

آموزش CSS:تصاویر CSS

دستورالعمل مرجع HTML DOM:ویژگی فیلتر

مثال

همه تصاویر را به سیاه و سفید تبدیل کنید (100% خاکستری):

img {
  filter: grayscale(100%);
}

خودتان امتحان کنید

نکات:مثال‌های بیشتری از TIY را در پایین صفحه پیدا کنید.

قواعد CSS

فیلتر: هیچ یک | بلور () | روشنایی () | کنتراست () | سایه افکنی () | سیاه و سفید () | چرخش رنگ () | معکوس () | شفافیت () | پر نور () | سياه و سفید () | آدرس();

نکات:بہت سے فیلٹر استعمال کئے جانے کے لئے، ہر فیلٹر کو سپراس کے ذریعے علیحدہ علیحدہ کیا جائے گا (صفحے کے نیچے کی زیادہ مثال دیکھیئے)۔

تکنیکی تفصیلات

مقصد کا قیمتی: none
ورث کاری: نہیں
آنی مواصلاتی بنانے: پشتیبند:آنی مواصلاتی اپریشن。
ورژن: CSS3
جس میں استعمال کیا جائے گا: 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 کا استعمال کیا جائے گا (شادیا عناصر کی لمبائی کی طرح بھی کی جائے گی)۔

توضیحات:چروم، سافری اور اوپرا، شاید دیگر براؤزر بھی، چوتھی لمبائی کو نہیں دعوا کرتے؛ اگر اضافہ کیا جائے تو اس کا نمودار نہیں ہوگا۔

color - اختیاری۔شادیا کو رنگ اضافہ کرتا ہے۔ اگر کوئی مقرر نہیں کیا گیا تو رنگ نئی مرضی (غیر معمولی طور پر کالامک) کا ہوگا۔

یہ مثال قرمز کا شادیا خلق کرتا ہے، افقی اور عمودی سمت میں دونوں 8 پیکسلس، 10 پیکسلس کا تارچوبہ اور:

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) پورا نا سینٹریٹڈ عکس بنادیاگا。
  • 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%);
}

خودتان امتحان کنید

شرطی اثر ڈروپ شاڈو نمونہ

عکس کوچک کا شرطی اثر ڈروپ شاڈو(8px 8px 10px gray);

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

خودتان امتحان کنید

灰阶实例

将图像转换为灰阶：

img {
  filter: grayscale(50%);
}

خودتان امتحان کنید

色相旋转实例

مثال خاکستری

img {
  تصویر را به حالت خاکستری تبدیل کنید:
}

خودتان امتحان کنید

مثال چرخش رنگ

در تصویر از چرخش رنگ استفاده کنید:

img {
  filter: invert(100%);
}

خودتان امتحان کنید

مثال معکوس

نمونه‌های موجود در تصویر را معکوس کنید:

img {
  شفافیت مثال
}

خودتان امتحان کنید

تنظیم میزان شفافیت تصویر:

饱和度实例

img {
  filter: saturate(800%);
}

خودتان امتحان کنید

مثال قهوه‌ای

تصویر را به رنگ قهوه‌ای تبدیل کنید:

img {
  filter: sepia(100%);
}

خودتان امتحان کنید

استفاده از چندین فیلتر

برای استفاده از چندین فیلتر، هر کدام را با فضای خالی از هم جدا کنید. توجه داشته باشید که ترتیب مهم است (مثلاً اگر grayscale() را پس از sepia() استفاده کنید، تصویر به طور کامل سیاه و سفید خواهد شد):

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-

توضیحات:بھی اور نسخه‌های قدیمی‌تر اینترنت ایکسپلورر (4.0 تا 8.0) ویژگی غیر استاندارد "filter" را پشتیبانی می‌کنند. هنگامی که نیاز به پشتیبانی از نسخه‌های 8.0 و کمتر دارید، عمدتاً برای شفافیت استفاده می‌شود.