تمنحك ميزة حجب CSS خيار استخدام صورة كطبقة قناع. وهذا يعني أنّه يمكنك استخدام صورة أو ملف SVG أو مخطط تدرّج لإنشاء قناع، وذلك لإنشاء تأثيرات مثيرة للاهتمام بدون استخدام محرّر صور.
عند اقتصاص عنصر باستخدام السمة clip-path، تصبح المنطقة المقتطعة غير مرئية.
إذا أردت بدلاً من ذلك جعل جزء من الصورة غير شفاف أو تطبيق تأثير آخر عليها، عليك استخدام ميزة "التمويه".
توضّح هذه المشاركة كيفية استخدام السمة mask-image في CSS،
التي تتيح لك تحديد صورة لاستخدامها كطبقة قناع.
يمنحك ذلك ثلاثة خيارات. يمكنك استخدام ملف صورة كقناع أو ملف SVG أو مخطط تدرّج.
توافُق المتصفح
على الرغم من أنّ إخفاء CSS متاح في الإصدار الأساسي من الإصدار الجديد، إلا أنّ معظم ميزات mask-image
تتوفّر في إصدارات المتصفّح السابقة باستخدام البادئة -webkit-mask-image.
توضِّح الأمثلة التالية كيفية استخدام السمتَين معًا للحصول على أفضل تنسيق متوافق مع المتصفحات.
قناع باستخدام صورة
تعمل سمة mask-image بطريقة مشابهة لسمة background-image.
استخدِم القيمة url() لتمرير صورة.
يجب أن تحتوي صورة القناع على منطقة شفافة أو شبه شفافة.
ستؤدي المنطقة الشفافة بالكامل إلى إخفاء جزء من الصورة تحتها. سيؤدي استخدام منطقة شبه شفافة إلى ظهور جزء من الصورة الأصلية. يمكنك الاطّلاع على الفرق في رمز CodePen التالي.
- الصورة الأولى هي الصورة الأصلية للبالونات بدون قناع.
- تم تطبيق قناع على الصورة الثانية يتضمّن نجمة بيضاء على خلفية شفافة بالكامل.
- تحتوي الصورة الثالثة على نجمة بيضاء على خلفية شفافة متدرّجة.
يستخدم هذا المثال أيضًا السمة mask-size بالقيمة cover.
تعمل هذه السمة بالطريقة نفسها التي تعمل بها background-size.
استخدِم الكلمات الرئيسية cover وcontain أو حدِّد حجم الخلفية باستخدام أي وحدة طول صالحة أو نسبة مئوية.
يمكنك أيضًا تكرار القناع تمامًا كما يمكنك تكرار صورة خلفية، من أجل استخدام صورة صغيرة كنمط متكرر.
قناع باستخدام رسومات SVG
بدلاً من استخدام ملف صورة كقناع، يمكنك استخدام ملف SVG.
هناك طريقتان لإجراء ذلك.
الطريقة الأولى هي استخدام عنصر <mask> داخل ملف SVG والإشارة إلى معرّف هذا العنصر في سمة mask-image.
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
وتتمثل ميزة هذا النهج في أنّه يمكن تطبيق القناع على أي عنصر HTML، وليس على صورة فقط.
بالنسبة إلى السيناريو الأكثر شيوعًا لتطبيق تأثير القناع على صورة،
يمكنك بدلاً من ذلك تضمين الصورة في ملف SVG.
الطريقة الأولى هي Baseline (الأساسية) المتوفّرة حديثًا، بما في ذلك الصورة في SVG
، وهي متوافقة مع المتصفّحات القديمة التي تتيح استخدام الإصدار الذي يتضمّن البادئة -webkit.
قناع يتضمّن تدرّجًا
إنّ استخدام تدرج CSS كقناع هو طريقة أنيقة لتحقيق منطقة تم حجبها بدون الحاجة إلى إنشاء صورة أو ملف SVG.
على سبيل المثال، يمكن أن يضمن التدرّج اللوني الخطي المستخدَم كقناع عدم ظهور الجزء السفلي من الصورة داكنًا جدًا أسفل الترجمة.
يمكنك استخدام أي من أنواع التدرجات المتوافقة، وإنشاء تصميمات مبتكرة بقدر ما تريد. يستخدم هذا المثال التالي تدرجًا شعاعيًا لإنشاء قناع دائري لإضاءة خلف الترجمة.
أقنعة متعددة
كما هو الحال مع صور الخلفية، يمكنك تحديد مصادر متعددة للقناع، ودمجها للحصول على التأثير الذي تريده. يكون هذا مفيدًا بشكل خاص إذا كنت تريد استخدام نمط تم إنشاؤه باستخدام تدرّجات CSS كقناع. وستستخدم هذه الصور عادةً صور خلفية متعددة، وبالتالي يمكن تحويلها بسهولة إلى قناع.
على سبيل المثال، هناك نمط لوحة شطّب في النماذج التي تتضمّن تدرّجات CSS. تبدو التعليمة البرمجية التي تستخدم صور الخلفية على النحو التالي:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
لتحويل هذا النمط أو أي نمط آخر مصمّم للصور في الخلفية إلى قناع،
عليك استبدال سمات background-* بسمات mask ذات الصلة،
بما في ذلك السمات التي تبدأ بالبادئة -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
يمكنك إنشاء بعض التأثيرات الرائعة من خلال تطبيق أنماط متدرجة على الصور. يمكنك اختبار بعض الصيغ الأخرى من خلال إنشاء نسخة من رمز CodePen التالي.
إلى جانب الاقتصاص، تُعدّ أقنعة CSS طريقة لإضافة لمسة مميّزة إلى الصور وعناصر HTML الأخرى بدون الحاجة إلى استخدام تطبيق رسومات.