CSS mask-repeat ਪ੍ਰਾਪਰਟੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

mask-repeat ਵਿਸ਼ੇਸ਼ਤਾ ਸੈਟ ਕਰਦੇ ਹਨ ਕਿ ਮਾਸਕ ਚਿੱਤਰ ਕਿਵੇਂ/ਕਿਵੇਂ ਮੁੜਦਾ ਹੈ。

ਮੂਲ ਸਥਿਤੀ ਵਿੱਚ ਮਾਸਕ ਚਿੱਤਰ ਊਰਦੇ ਅਤੇ ਪਰਾਲਦੇ ਦਿਸ਼ਾ ਵਿੱਚ ਮੁੜਦਾ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਵਰਤੋਂ mask-repeat: no-repeat; ਅਤੇ mask-repeat: repeat;:

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

ਸਵੈ ਕਿਸੇ ਸਿੱਧੇ ਵਰਤੋਂ

ਉਦਾਹਰਣ 2

ਵਰਤੋਂ mask-repeat: round; ਅਤੇ mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

ਸਵੈ ਕਿਸੇ ਸਿੱਧੇ ਵਰਤੋਂ

ਉਦਾਹਰਣ 3

ਵਰਤੋਂ mask-repeat: repeat-x; ਅਤੇ mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

ਸਵੈ ਕਿਸੇ ਸਿੱਧੇ ਵਰਤੋਂ

CSS ਗਰਮਾਤਰਾ

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
repeat

ਮਾਸਕ ਚਿੱਤਰ ਊਰਦੇ ਅਤੇ ਪਰਾਲਦੇ ਦਿਸ਼ਾ ਵਿੱਚ ਮੁੜਦਾ ਹੈ。

ਅੰਤਿਮ ਚਿੱਤਰ ਨਹੀਂ ਹੋਣ ਵਾਲਾ ਤਾਂ ਉਹ ਕੱਟਿਆ ਜਾਵੇਗਾ。

ਇਹ ਮੂਲ ਮੁੱਲ ਹੈ。
repeat-x ਮਾਸਕ ਚਿੱਤਰ ਕੇਵਲ ਪਰਾਲਦਾ ਦਿਸ਼ਾ ਵਿੱਚ ਮੁੜਦਾ ਹੈ。
repeat-y ਮਾਸਕ ਚਿੱਤਰ ਕੇਵਲ ਊਰਦਾ ਦਿਸ਼ਾ ਵਿੱਚ ਮੁੜਦਾ ਹੈ。
space

ਮਾਸਕ ਚਿੱਤਰ ਮੁੜਦਾ ਹੈ ਅਤੇ ਕੱਟਣ ਬਿਨਾ ਮੁੜਦਾ ਹੈ。

ਪਹਿਲਾ ਅਤੇ ਆਖਰੀ ਚਿੱਤਰ ਯੂਨਿਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਚਿੱਤਰਾਂ ਦਰਮਿਆਨ ਖਾਲੀ ਜਗ੍ਹਾ ਸਮਾਨ ਤਰ੍ਹਾਂ ਵੰਡੀ ਜਾਵੇਗੀ。
round ਮਾਸਕ ਚਿੱਤਰ ਮੁੜਦਾ ਹੈ ਅਤੇ ਸਪੇਸ ਭਰਨ ਲਈ ਕੱਚਰ ਜਾਂ ਸਟ੍ਰੇਚ ਕੀਤਾ ਜਾਵੇਗਾ (ਬਿਨਾ ਖਾਲੀ ਜਗ੍ਹਾ ਦੇ)。
no-repeat ਮਾਸਕ ਚਿੱਤਰ ਨਹੀਂ ਮੁੜਦਾ ਹੈ। ਚਿੱਤਰ ਕੇਵਲ ਇੱਕ ਵਾਰ ਦਿਖਾਇਆ ਜਾਵੇਗਾ。
initial ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਆਪਣੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਵਿਰਾਸਤੀਕਰਣ ਕਰਦੀ ਹੈ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: repeat
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰੱਥ ਨਹੀਂ ਹੈ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ。
ਸੰਸਕਰਣ: CSS ਮਾਸਕਿੰਗ ਮੌਡਿਊਲ ਲੈਵਲ 1
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰਮਾਤਰਾ: object.style.maskRepeat="no-repeat"

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

ਸਪਰਸ਼ਦਾਰ ਅੰਕ ਇਹ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਨ ਕਿ ਕਿਸ ਬਰਵਾਰ ਵਿੱਚ ਇਹ ਲੋੜੀਦਾ ਵਿਸ਼ੇਸ਼ਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਬਰਾਉਜ਼ਰ ਹੈ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
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-size ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀਃCSS mask-type ਪ੍ਰਾਪਰਟੀ