مثال
تغيير لون جميع الصور إلى الأبيض والأسود (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
نصيحة: المزيد "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
الخاصية تصفية وتعرف التأثيرات البصرية (like blur and saturation) إلى عنصر (often <img>) .
| القيمة الافتراضية: | لا شيء |
|---|---|
| وارث: | no |
| Animatable: | yes. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.WebkitFilter="grayscale(100%)" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
ملاحظة: أقدم إصدارات Internet Explorer (4.0 to 8.0) أيدت غير القياسية "filter" الممتلكات التي تم إهمال. وهذه تستخدم في الغالب ل التعتيم عند الحاجة بدعم من IE8 وهبوطا.
CSS بناء الجملة
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();نصيحة: لاستخدام مرشحات متعددة، فصل كل مرشح مع مساحة (See "More Examples" below) .
مرشح وظائف
ملاحظة: المرشحات التي تستخدم القيم مئوية (ie 75%) ، وأيضا قبول القيمة كما عشري (ie 0.75) .
| منقي | وصف | العبها |
|---|---|---|
| none | القيمة الافتراضية. تحدد أية آثار | العبها " |
| 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) . مثال على خلق ظلال الأحمر، وهو 8px كبيرة أفقيا وعموديا، مع طمس الأثر في 10px: مرشح: انخفاض الظل (8px 8px 10px الأحمر)؛ نصيحة: هذا المرشح هو مماثل ل مربع الظل الممتلكات. | العبها " |
| 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٪ جعل صورة بني داكن تماما. ملاحظة: لا يسمح القيم السلبية. | العبها " |
| url() | على url() يأخذ وظيفة موقع ملف XML الذي يحدد مرشح SVG، ويمكن أن تشمل مرتكزا إلى عنصر مرشح معين. مثال: مرشح: url(svg-url#element-id) | |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
طمس مثال
تطبيق طمس الأثر على الصورة:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
سطوع مثال
ضبط سطوع الصورة:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
على النقيض مثال
ضبط التباين للصورة:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
انخفاض الظل مثال
تطبيق تأثير شبح الهبوط إلى الصورة:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
الرمادي مثال
تحويل الصورة إلى الرمادي:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
هوى دوران مثال
تطبيق استدارة هوى على الصورة:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
عكس مثال
عكس العينات في الصورة:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
غموض مثال
تعيين مستوى التعتيم للصورة:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
اشبع مثال
تشبع الصورة:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
البني الداكن مثال
تحويل الصورة إلى بني داكن:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
الجمع بين مرشحات / مرشحات متعددة
استخدام مرشحات متعددة، فصل كل مرشح مع الفضاء.
ملاحظة: أمر مهم (ie using grayscale() بعد sepia() سيؤدي في صورة رمادية تماما).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
جميع المرشحات
مظاهرة للجميع وظائف مرشح:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} انها محاولة لنفسك » صفحات ذات صلة
HTML DOM المرجع filter property