مثال
تغيير لون صورة إلى الأسود والأبيض (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
انها محاولة لنفسك » تعريف والاستخدام
الخاصية فلتر يضيف تأثيرات بصرية (like blur and saturation) إلى صور.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها بكت تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| filter | 18.0 بكت | 13.0 | 35.0 | 6.0 بكت | 15.0 بكت |
ملاحظة: كروم وسفاري وأوبرا دعم بديل، الخاصية WebkitFilter.
بناء الجملة
إعادة الممتلكات مرشح:
object .style.filterتعيين الخاصية مرشح:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
تصفية وظائف
ملاحظة: المرشحات التي تستخدم القيم مئوية (ie 75%) ، وأيضا قبول القيمة كما عشري (ie 0.75) .
| منقي | وصف |
|---|---|
| لا شيء | تحدد أية آثار |
| blur( px ) | وينطبق طمس الأثر على الصورة. سوف يخلق قيمة أكبر أكثر ضبابية. إذا لم يتم تحديد قيمة، ويستخدم 0. |
| brightness( % ) | ضبط سطوع الصورة. و0٪ جعل الصورة سوداء تماما. 100٪ (1) هو الافتراضي وتمثل الصورة الأصلية. والقيم أكثر من 100٪ توفر نتائج أكثر إشراقا. |
| contrast( % ) | يضبط على النقيض من الصورة. و0٪ جعل الصورة سوداء تماما. 100٪ (1) هو الافتراضي وتمثل الصورة الأصلية. والقيم أكثر من 100٪ توفر نتائج مع تباين أقل. |
| drop- shadow( h-shadow v-shadow blur spread color ) | ينطبق تأثير شبح الهبوط إلى الصورة. القيم الممكنة: ح الظل - مطلوب. يحدد قيمة بكسل على الظل الأفقي. القيم السلبية تضع الظل إلى اليسار من الصورة. الخامس الظل - مطلوب. يحدد قيمة بكسل على الظل الرأسي. القيم السلبية تضع الظل فوق الصورة. طمس - اختياري. هذه هي القيمة الثالثة، ويجب أن تكون في بكسل. ويضيف طمس الأثر في الظل. سوف يخلق قيمة أكبر أكثر طمس (الظل يصبح أكبر وأخف وزنا). لا يسمح القيم السلبية. إذا لم يتم تحديد قيمة، يتم استخدام 0 (حافة الظل حادة). انتشار - اختياري. هذه هي القيمة الرابعة، ويجب أن تكون في بكسل. سوف يسبب القيم الإيجابية في الظل لتوسيع وتنمو وتكبر، والقيم السلبية سوف يتسبب في الظل ليتقلص. إذا لم يكن محددا، وسوف تكون 0 (the shadow will be the same size as the element) . ملاحظة: كروم وسفاري وأوبرا، وربما المتصفحات الأخرى، لا تدعم هذا الطول 4TH. انها لن تجعل إذا المضافة. اللون: اختياري. يضيف لون الظل. إذا لم يكن محددا، اللون يعتمد على المتصفح (often black) . نصيحة: هذا المرشح هو مماثل ل مربع الظل الممتلكات. |
| grayscale( % ) | تحويل الصورة إلى تدرج الرمادي. 0٪ (0) هو الافتراضي وتمثل الصورة الأصلية. سوف 100٪ جعل الصورة رمادية تماما (used for black and white images) . ملاحظة: لا يسمح القيم السلبية. |
| hue- rotate( deg ) | ينطبق تناوب هوى على الصورة. تحدد قيمة عدد الدرجات في جميع أنحاء الدائرة اللون وسيتم تعديل العينات الصورة. 0deg هو الافتراضي، وتمثل الصورة الأصلية. ملاحظة: القيمة القصوى هي 360deg. |
| invert( % ) | المقلوب العينات في الصورة. 0٪ (0) هو الافتراضي وتمثل الصورة الأصلية. سوف 100٪ جعل الصورة معكوسة تماما. ملاحظة: لا يسمح القيم السلبية. |
| opacity( % ) | يحدد مستوى التعتيم للصورة. يصف مستوى التعتيم على مستوى الشفافية، حيث: 0٪ شفافة تماما. 100٪ (1) هو الافتراضي وتمثل الصورة الأصلية (no transparency) . ملاحظة: لا يسمح القيم السلبية. نصيحة: هذا المرشح يشبه التعتيم الممتلكات. |
| saturate( % ) | التشبع الصورة. 0٪ (0) سيجعل صورة الامم المتحدة مشبعة تماما. 100٪ هو الافتراضي وتمثل الصورة الأصلية. القيم أكثر من 100٪ وتقدم النتائج المشبعة فائقة. ملاحظة: لا يسمح القيم السلبية. |
| sepia( % ) | تحويل الصورة إلى بني داكن. 0٪ (0) هو الافتراضي وتمثل الصورة الأصلية. سوف 100٪ جعل صورة بني داكن تماما. ملاحظة: لا يسمح القيم السلبية. |
تفاصيل تقنية
| صفحة CSS | CSS3 |
|---|
صفحات ذات صلة
CSS المرجع filter property
<كائن نمط