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

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਵੇਰਵੇ ਗਰੇਡੀਅਂਟ ਨਾਲ ਮਾਸਕ ਲੇਬਲ ਕਰੋ

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 <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>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ