الغطاء CSS

باستخدام CSS تغطية، يمكنك إنشاء طبقة تغطية وتوضع على العنصر، لتخفي جزءًا أو كله من العنصر.

خصائص mask-image

CSS mask-image يحدد هذا الخصائص صورة طبقة التغطية.

يمكن أن تكون صورة طبقة التغطية صورة PNG أو صورة SVG أوتغییرات رنگ CSS أو عنصر SVG <mask>.

دعم المتصفحات

الرقم في الجدول أدناه يعني الإصدار الأول الذي يدعم هذه الخاصية بالكامل.

مزودة ب -webkit- رقم المقدار الذي يشير إلى الإصدار الأول الذي يدعم هذا المقدار من البادئة.

استخدام الصورة كطبقة تغطية

لإستخدام صورة PNG أو SVG كطبقة تغطية، استخدم: url() تقديم صورة طبقة التغطية.

يجب أن تحتوي صورة الشاشة على منطقة شفافة أو نصف شفافة. الأسود يعني شفافية كاملة.

هذه هي صورة الشاشة التي سنستخدمها (صورة PNG):

هذه صورة من قرية البحرية الإيطالية:

الآن، سنطبق صورة الشاشة (الصورة PNG في الأعلى) كطبقة تغطية على صورة قرية البحرية الإيطالية:

مثال

هذا هو الكود المصدر:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

جرب بنفسك

توضيح الأمثلة

mask-image الخاصية تحدد الصورة المستخدمة كحاجز العنصر.

mask-repeat الخاصية تحدد ما إذا كانت الصورة الحاجز ستكرر أو كيف ستكرر. قيمة no-repeat تعني أن الصورة الحاجز لن تكرر (سيتم عرض الصورة الحاجز مرة واحدة فقط).

مثال آخر

إذا كنا نتجاهل mask-repeat إذا لم نذكر هذه الخاصية، سيتم تكرار الصورة الحاجز على كامل صورة ووهان:

مثال

هذا هو الكود المصدر:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

جرب بنفسك

استخدام التدرج كحاجز الصورة

يمكن استخدام التدرج الخطي وال径ي كصور حاجز.

مثال على التدرج الخطي

في هذا المكان، نستخدم التدرج الخطي كحاجز الصورة. هذا التدرج من الأعلى (الأسود) إلى الأسفل (الشفاف):

مثال

استخدام التدرج الخطي كحاجز الصورة:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

جرب بنفسك

في هذا المكان، نستخدم التدرج الخطي والنص كحاجز الصورة:

مثال

استخدام التدرج الخطي والنص كحاجز الصورة:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.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) 50%);
}

جرب بنفسك

استخدام SVG كطبقة تغطية

يمكن استخدام عنصر <mask> في SVG لإنشاء تأثير تغطية داخل رسم 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="wuhan.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="wuhan.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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

جرب بنفسك