يمنحك إخفاء CSS خيار استخدام صورة كطبقة قناع. وهذا يعني أنه يمكنك استخدام صورة أو رسومات موجّهة يمكن تغيير حجمها (SVG) أو تدرج كقناع لإنشاء تأثيرات مثيرة للاهتمام بدون محرِّر صور.
عند اقتصاص عنصر باستخدام السمة clip-path، تصبح المنطقة التي يتم اقتطاعها غير مرئية.
إذا أردت بدلاً من ذلك جعل جزء من الصورة معتمًا أو تطبيق أي تأثير آخر عليها، فأنت بحاجة إلى استخدام الإخفاء.
توضّح هذه المشاركة كيفية استخدام السمة mask-image في CSS،
والتي تتيح لك تحديد صورة لاستخدامها كطبقة قناع.
يمنحك هذا ثلاثة خيارات. يمكنك استخدام ملف صورة كقناع أو رسومات موجّهة يمكن تغيير حجمها (SVG) أو تدرّج.
توافُق المتصفح
لا تتوافق معظم المتصفحات إلا مع خاصية إخفاء لغة CSS العادية.
يجب استخدام البادئة -webkit- بالإضافة إلى السمة العادية لتحقيق أفضل توافق مع المتصفّح.
راجِع القسم هل يمكنني استخدام أقنعة CSS؟ للحصول على معلومات كاملة عن دعم المتصفِّح.
على الرغم من أنّ استخدام المتصفح الخاص بالبادئة أمر جيد،
فعند استخدام الإخفاء لجعل النص فوق الصورة مرئيًا، عليك مراعاة ما سيحدث في حال عدم توفر الإخفاء.
قد يكون من المفيد استخدام طلبات البحث عن الميزات لرصد توافق mask-image أو -webkit-mask-image وتوفير عنصر احتياطي قابل للقراءة قبل إضافة النسخة المخفية الهوية.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
الإخفاء باستخدام صورة
تعمل السمة mask-image بالطريقة نفسها التي تعمل بها السمة background-image.
استخدِم القيمة url() لتمرير الصورة.
يجب أن تحتوي صورة القناع على منطقة شفافة أو شبه شفافة.
وستجعل المنطقة الشفافة تمامًا جزء الصورة الموجود أسفل تلك المنطقة غير مرئي. ومع ذلك، يتيح استخدام منطقة شبه شفافة أن تظهر بعض الصورة الأصلية خلالها. يمكنك رؤية الفرق في تأثير Glitch أدناه. الصورة الأولى هي الصورة الأصلية لبالونات بدون قناع. في الصورة الثانية، تم تطبيق قناع عليه نجمة بيضاء على خلفية شفافة بالكامل. تحتوي الصورة الثالثة على نجمة بيضاء على خلفية بشفافية متدرجة.
في هذا المثال، أستخدم أيضًا السمة mask-size بقيمة cover.
يعمل هذا الموقع بالطريقة نفسها التي يعمل بها background-size.
يمكنك استخدام الكلمتين الرئيسيتين cover وcontain أو يمكنك تحديد حجم الخلفية باستخدام أي وحدة طول أو نسبة مئوية صالحة.
يمكنك أيضًا تكرار القناع تمامًا كما تكرر صورة خلفية، لاستخدام صورة صغيرة كنمط متكرر.
الإخفاء باستخدام رسومات موجّهة يمكن تغيير حجمها (SVG)
وبدلاً من استخدام ملف صورة كقناع، يمكنك استخدام رسومات موجّهة يمكن تغيير حجمها (SVG).
يمكن تحقيق ذلك بطريقتين.
الأول هو إدراج عنصر <mask> في الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) والإشارة إلى معرّف هذا العنصر في السمة mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
ميزة هذه الطريقة هي أنه يمكن تطبيق القناع على أي عنصر HTML، وليس فقط على صورة. وللأسف، فإن المتصفح Firefox هو المتصفح الوحيد الذي يدعم هذه الطريقة.
ومع ذلك، لا نفقد كل شيء، فبالنسبة إلى السيناريو الأكثر شيوعًا لإخفاء الصورة، يمكننا تضمين الصورة في SVG.
الإخفاء باستخدام تدرّج
يعد استخدام تدرج CSS كقناع طريقة رائعة للحصول على مساحة مغطاة بدون الحاجة إلى الانتقال إلى عناء إنشاء صورة أو تنسيق SVG.
على سبيل المثال، يضمن تدرج خطي بسيط يُستخدم كقناع أن الجزء السفلي من الصورة لن يكون معتمًا جدًا تحت التسمية التوضيحية.
يمكنك استخدام أي من أنواع التدرجات المتوافقة، كما يمكنك الإبداع بالشكل الذي تريده. يستخدم المثال التالي تدرجًا نصف قطري لإنشاء قناع دائري لإبرازه خلف التسمية التوضيحية.
استخدام عدة أقنعة
كما هو الحال مع صور الخلفية، يمكنك تحديد مصادر أقنعة متعددة، ودمجها للحصول على التأثير الذي تريده. وهذا مفيد على وجه الخصوص إذا كنت تريد استخدام نمط تم إنشاؤه باستخدام تدرجات 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;
هناك بعض التأثيرات الرائعة التي يمكن إجراؤها من خلال تطبيق أنماط التدرج على الصور. جرِّب إعادة مزج ميزة Glitch واختبار بعض الصيغ الأخرى.
بالإضافة إلى الاقتصاص، تُعد أقنعة CSS طريقة لجذب الاهتمام إلى الصور وعناصر HTML الأخرى دون الحاجة إلى استخدام تطبيق رسومات.
صورة من "جوليو ريوناالدو" على Unسبل.