اخفاء CSS
باستخدام قناع CSS ، يمكنك إنشاء طبقة قناع لوضعها فوق عنصر لإخفاء أجزاء من العنصر جزئيًا أو كليًا.
خاصية CSS mask-image
mask-imageتحدد خاصية CSS صورة طبقة القناع.
يمكن أن تكون صورة طبقة القناع صورة PNG أو صورة SVG أو تدرج CSS أو عنصر SVG <قناع> .
دعم المتصفح
ملاحظة: معظم المتصفحات لديها دعم جزئي فقط لإخفاء CSS. ستحتاج إلى استخدام بادئة -webkit- بالإضافة إلى الخاصية القياسية في معظم المتصفحات.
تحدد الأرقام الواردة في الجدول أدناه إصدار المتصفح الأول الذي يدعم الخاصية بالكامل. الأرقام متبوعة بـ -webkit- تحدد الإصدار الأول الذي يعمل بالبادئة.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
استخدم صورة كطبقة قناع
لاستخدام صورة PNG أو SVG كطبقة قناع ، استخدم قيمة url () لتمرير صورة طبقة القناع.
يجب أن تحتوي صورة القناع على منطقة شفافة أو شبه شفافة. يشير اللون الأسود إلى الشفافية الكاملة.
ها هي صورة القناع (صورة PNG) التي سنستخدمها:
إليكم صورة من Cinque Terre في إيطاليا:
الآن ، نطبق صورة القناع (صورة PNG أعلاه) كطبقة قناع للصورة من Cinque Terre ، إيطاليا:
مثال
هنا هو شفرة المصدر:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
شرح المثال
تحدد الخاصية الصورة mask-imageالتي سيتم استخدامها كطبقة قناع لعنصر.
تحدد الخاصية ما mask-repeatإذا كان سيتم تكرار صورة القناع أم لا. تشير no-repeat
القيمة إلى أن صورة القناع لن تتكرر (سيتم عرض صورة القناع مرة واحدة فقط).
مثال آخر
إذا حذفنا mask-repeatالخاصية ، فسوف تتكرر صورة القناع في جميع أنحاء الصورة من Cinque Terre ، إيطاليا:
مثال
هنا هو شفرة المصدر:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
استخدم التدرجات كطبقة قناع
يمكن أيضًا استخدام التدرجات اللونية الخطية والقطرية لـ CSS كصور قناع.
أمثلة على التدرج الخطي
هنا ، نستخدم التدرج الخطي كطبقة قناع لصورتنا. ينتقل هذا التدرج الخطي من أعلى (أسود) إلى أسفل (شفاف):
مثال
استخدم التدرج الخطي كطبقة قناع:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
هنا ، نستخدم التدرج الخطي مع إخفاء النص كطبقة قناع لصورتنا:
Cinque Terre هي منطقة ساحلية داخل Liguria ، في شمال غرب إيطاليا. تقع في الغرب من مقاطعة لا سبيتسيا ، وتضم خمس قرى: مونتيروسو الماري ، وفيرنازا ، وكورنيجليا ، ومانارولا ، وريوماجيوري.
Cinque Terre هي منطقة ساحلية داخل Liguria ، في شمال غرب إيطاليا. تقع في الغرب من مقاطعة لا سبيتسيا ، وتضم خمس قرى: مونتيروسو الماري ، وفيرنازا ، وكورنيجليا ، ومانارولا ، وريوماجيوري.
Cinque Terre هي منطقة ساحلية داخل Liguria ، في شمال غرب إيطاليا. تقع في الغرب من مقاطعة لا سبيتسيا ، وتضم خمس قرى: مونتيروسو الماري ، وفيرنازا ، وكورنيجليا ، ومانارولا ، وريوماجيوري.
مثال
استخدم تدرجًا خطيًا مع إخفاء النص كطبقة قناع:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
أمثلة على التدرج الشعاعي
هنا ، نستخدم تدرجًا شعاعيًا (على شكل دائرة) كطبقة قناع لصورتنا:
مثال
استخدم تدرجًا شعاعيًا كطبقة قناع (دائرة):
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
هنا ، نستخدم تدرجًا شعاعيًا (على شكل قطع ناقص) كطبقة قناع لصورتنا:
مثال
استخدم تدرجًا شعاعيًا آخر كطبقة قناع (شكل بيضاوي):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
استخدم SVG كطبقة قناع
يمكن استخدام عنصر SVG <mask>داخل رسم SVG لإنشاء تأثيرات تقنيع.
هنا ، نستخدم <mask>عنصر SVG لإنشاء طبقات قناع مختلفة لصورتنا:
مثال
طبقة قناع SVG (تم تشكيلها على شكل مثلث):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
مثال
طبقة قناع SVG (تكونت على شكل نجمة):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
مثال
طبقة قناع SVG (تكونت على شكل دوائر):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
خصائص اخفاء CSS
يسرد الجدول التالي جميع خصائص إخفاء CSS:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |