CSS mask-position ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

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

mask-position ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਮਾਸਕ ਸਥਾਨ ਦੇ ਸਬੰਧ ਵਿੱਚ ਸ਼ੁਰੂਆਤੀ ਸਥਾਨ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਨ。

ਸੁਝਾਅ:ਮੂਲ ਸਥਿਤੀ ਵਿੱਚ, ਰਾਇਟਰੀ ਚਿੱਤਰ ਸਿਫਾਰਸ਼ ਦੇ ਸਰਵਤਰ ਪਰਿਭਾਸ਼ਿਤ ਸਥਾਨ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ ਅਤੇ ਹੱਥੀ ਅਤੇ ਉੱਚ ਦੋਵੇਂ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਪਰਾਲਿਕਾ ਹੁੰਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਰਾਇਟਰੀ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਨੂੰ ਮੱਧ ਵਿੱਚ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਆਪ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਰਾਇਟਰੀ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਨੂੰ ਦੱਖਣੀ ਹੱਥੀ ਵਿੱਚ ਸੈਟ ਕਰੋ:

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

ਆਪਣੇ ਆਪ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰਮਾਤਰਾ

mask-position: value;

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

ਮੁੱਲ ਵਰਣਨ
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 ਜੇਕਰ ਤੁਸੀਂ ਕੇਵਲ ਇੱਕ ਕੀਵਾਰਡ ਨੂੰ ਸੈਟ ਕਰੋ ਤਾਂ ਦੂਜਾ ਮੁੱਲ "center" ਹੋਵੇਗਾ。
x% y%

ਪਹਿਲਾ ਮੁੱਲ ਹੋਰਤੱਲੇ ਸਥਾਨ ਹੈ ਅਤੇ ਦੂਜਾ ਮੁੱਲ ਸਥਾਨ ਦੀ ਪਰਾਲਿਕਾ ਹੈ。

ਉੱਚ ਖੁੱਲ੍ਹਾ 0% 0% ਹੈ।ਨੀਚ ਨੀਚ 100% 100% ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਕੇਵਲ ਇੱਕ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ ਤਾਂ ਦੂਜਾ ਮੁੱਲ 50% ਹੋਵੇਗਾ。

ਮੂਲ ਮੁੱਲ ਹੈ: 0% 0%
xpos ypos

ਪਹਿਲਾ ਮੁੱਲ ਹੋਰਤੱਲੇ ਸਥਾਨ ਹੈ ਅਤੇ ਦੂਜਾ ਮੁੱਲ ਸਥਾਨ ਦੀ ਪਰਾਲਿਕਾ ਹੈ。

ਉੱਚ ਖੁੱਲ੍ਹਾ 0 0 ਹੈ।ਇਕਾਈ ਹੋ ਸਕਦੀ ਹੈ ਪਿਕਸਲ (0px 0px) ਜਾਂ ਕਿਸੇ ਹੋਰ CSS ਇਕਾਈ。

ਜੇਕਰ ਤੁਸੀਂ ਕੇਵਲ ਇੱਕ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ ਤਾਂ ਦੂਜਾ ਮੁੱਲ 50% ਹੋਵੇਗਾ。

ਪ੍ਰੋਸੈਂਟ (%%) ਅਤੇ ਸਥਾਨ ਨੂੰ ਮਿਸ਼ਰਿਤ ਕਰ ਸਕਦੇ ਹਨ。
initial ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial。
inherit ਆਪਣੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਲੈ ਲੈਣਾ।ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: 0% 0%
ਵਿਰਾਸਤੀ ਸਮਰੱਥਾ: ਨਹੀਂ
ਆਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰੱਥਾ ਨਹੀਂ ਹੈ।ਦੇਖੋ:ਆਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾ。
ਸੰਸਕਰਣ: CSS ਮਾਸਕਿੰਗ ਮੌਡਿਊਲ ਲੈਵਲ 1
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰਮਾਤਰਾ: object.style.maskPosition="100px center"

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

ਸਾਰੇ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਦਿਸਦੇ ਸਿਫਾਰਸ਼ ਸਿਫਾਟਰੀ ਬਰਾਉਜ਼ਰ ਦੀ ਪਹਿਲੀ ਪੂਰੀ ਸਮਰੱਥਾ ਵਾਲੀ ਸੰਸਕਰਣ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
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-repeat ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਮਾਧਾਨ:CSS mask-size ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ

ਸਮਾਧਾਨ:CSS mask-type ਪ੍ਰਤੀਯੋਗਤਾ ਵਿਸ਼ੇਸ਼ਤਾ