CSS mask ਪ੍ਰਤੀਯੋਗਿਤਾ

تعلیم اور استعمال

mask پرچ کا استعمال، عناصر کو (کامپلٹ یا جزوی) خفی یا کٹ کریں:

mask پرچ کی خصوصیات کا مختصر شکل اگلائی پرچاتا ہے:

مثال

مثال 1

تصویر کی شیلنگ کا قابو قائم کریں:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

ਖੁਦ ਕਰਕੇ ਪ੍ਰਯੋਗ ਕਰੋ

مثال 2

تصویر کی مختلف شیلنگ کا قابو قائم کریں: linear-gradient اور radial-gradient:

.mask1 {
  mask: linear-gradient(black, transparent);
}
.mask2 {
  mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

ਖੁਦ ਕਰਕੇ ਪ੍ਰਯੋਗ ਕਰੋ

مثال 3

SVG <mask> عناصر کے ذریعہ تصویر کی شیلنگ کا قابو قائم کریں:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

ਖੁਦ ਕਰਕੇ ਪ੍ਰਯੋਗ ਕਰੋ

مثال 4

SVG <mask> عناصر کے ذریعہ تصویر کی شیلنگ کا قابو قائم کریں:

<svg width="600" height="400">
  <mask id="svgmask1">
    <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(#svgmask1)"></image>
</svg>

ਖੁਦ ਕਰਕੇ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੰਥਾ

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
mask-image ਇਲੀਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤਣ ਯੋਗ ਮਾਸਕ ਚਿੱਤਰ ਸੈਟ ਕਰੋ। ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ none ਹੈ。
mask-mode

ਮਾਸਕ ਸਤਰ ਚਿੱਤਰ ਨੂੰ ਉਜਾਲਾ ਮਾਸਕ ਜਾਂ alpha ਮਾਸਕ ਦੇ ਰੂਪ ਵਿੱਚ ਦੇਖਣਾ ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ match-source ਹੈ।
mask-repeat

ਮਾਸਕ ਚਿੱਤਰ ਨੂੰ ਕਿਵੇਂ/ਕਿਸ ਤਰ੍ਹਾਂ ਦੁਹਰਾਉਣਾ ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ repeat ਹੈ।
mask-position

ਮਾਸਕ ਚਿੱਤਰ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਾਨ (ਸਬੰਧੀ ਮਾਸਕ ਸਥਾਨ ਖੇਤਰ) ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ 0% 0% ਹੈ।
mask-clip

ਮਾਸਕ ਚਿੱਤਰ ਦੇ ਪ੍ਰਭਾਵ ਵਾਲੇ ਖੇਤਰ ਨੂੰ ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ border-box ਹੈ।
mask-origin

ਮਾਸਕ ਸਤਰ ਚਿੱਤਰ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਾਨ (ਮਾਸਕ ਸਥਾਨ ਖੇਤਰ) ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ border-box ਹੈ।
mask-size

ਮਾਸਕ ਸਤਰ ਚਿੱਤਰ ਦਾ ਅਕਾਰ ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ auto ਹੈ।
mask-composite

ਮੌਜੂਦਾ ਮਾਸਕ ਸਤਰ ਅਤੇ ਹੇਠਲੇ ਮਾਸਕ ਸਤਰ ਦੀ ਵਰਤੇ ਗਈ ਸੰਗਠਨ ਕਰਮ ਸੈਟ ਕਰੋ。

ਮੂਲਤਵੀ ਮੁੱਲ ਵਜੋਂ add ਹੈ।
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲਤਵੀ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਇਸ ਗੁਣ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਵਿਰਾਸਤ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਤਵੀ ਮੁੱਲ: none match-source repeat 0% 0% border-box border-box auto add
ਵਿਰਾਸਤ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰੱਥ ਨਹੀਂ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ。
ਆਈਡੀ: CSS ਮਾਸਕਿੰਗ ਮੌਡਿਊਲ ਲੈਵਲ 1
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੰਥਾ: object.style.mask="url(star.svg)"

ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਸਤਰ ਵਿੱਚ ਸੰਖਿਆ ਇਹ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਗੁਣ ਦੀ ਸਮਰੱਥਾ ਰੱਖਣ ਵਾਲਾ ਬਰਾਉਜ਼ਰ ਦੀ ਆਈਡੀ ਹੈ।

ਚਰਾਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
120 120 53 15.4 106

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਟੀਕਲ:CSS ਸ਼ੇਡ

ਸਲਾਹਦਾਰ:CSS mask ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-clip ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-composite ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-image ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-mode ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-origin ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-position ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-repeat ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-size ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰ:CSS mask-type ਪ੍ਰਤੀਯੋਗਿਤਾ