CSS پوشش

CSS کی ماسک کے ذریعے، آپ ایک ماسک لائیں گے اور اس کو عناصر پر رکھ سکتے ہیں، تاکہ عناصر کے کچھ حصوں کو حصہ نکال سکتے ہیں یا پوری طرح خفی کرسکتے ہیں。

ماسک-تصویر کچھیت

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 اگر این ویژگی را حذف کنیم، تصویر پوشش در کل تصویر ووهانfish (Wuhenfish) تکرار خواهد شد:

مثال

در زیر کد منبع آورده شده است:

.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);
}

آزمایش کنید

در اینجا، ما از منحنی خطی و پوشش متن به عنوان پوشش تصویر استفاده می‌کنیم:

مثال

استفاده از منحنی خطی و پوشش متن به عنوان پوشش تصویر:

.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 کا استعمال شیلڈنگ لائیبر کیلئے

SVG <mask> علامت SVG گرافکس کے اندر استعمال کی جاسکتی ہے، تاکہ شیلڈنگ اثر پیدا کیا جاسکے。

یہاں، ہم SVG <mask> علامت استفادہ کرکے تصویر کیلئے مختلف شیلڈنگ لائیبر بناتے ہیں:

مثال

ایک 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>

آزمایش کنید