CSS mask-origin ਪ੍ਰਤੀਯੋਗਤਾ ਪੈਰਾਮੀਟਰ

ਪਿਛਲਾ ਪੰਨਾ mask-mode
ਅਗਲਾ ਪੰਨਾ mask-position

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

mask-origin ਵਿਸ਼ੇ ਵਿੱਚ ਮਾਸਕ ਇਮੇਜ ਦੀ ਮੂਲ ਸਥਿਤੀ ਨੂੰ ਨਿਰਦੇਸ਼ ਕਰਦਾ ਹੈ (ਯਾਨੀ ਮਾਸਕ ਸਥਿਤੀ ਖੇਤਰ)。

ਉਦਾਹਰਣ

ਪ੍ਰਦਰਸ਼ਨ mask-origin ਵਿਸ਼ੇ ਦੇ ਵੱਖ-ਵੱਖ ਮੁੱਲ:

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

ਆਪਣੇ ਆਪ ਦੋਹਰਾਓ

CSS ਗਰੈਮੇਟਰੀ

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

ਵਿਸ਼ੇ ਮੁੱਲ

ਮੁੱਲ	ਵਰਣਨ
border-box	ਸਥਿਤੀ ਬੰਦਰ ਬਾਕਸ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੈ। ਮੂਲ ਮੁੱਲ。
content-box	ਸਥਿਤੀ ਕੰਟੈਂਟ ਬਾਕਸ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੈ。
padding-box	ਸਥਿਤੀ ਅੰਦਰੂਨੀ ਬੰਦਰ ਬਾਕਸ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੈ。
fill-box	ਸਥਿਤੀ ਓਬਜੈਕਟ ਬੰਦਰ ਬਾਕਸ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੈ。
stroke-box	ਸਥਿਤੀ ਸਕੋਰਸ਼ ਬੰਦਰ ਬਾਕਸ ਦੇ ਸਬੰਧ ਵਿੱਚ ਹੈ。
view-box	ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ SVG ਵਿਜੂਅਲ ਬਾਕਸ ਦੇ ਰੂਪ ਵਿੱਚ ਉਲੇਖ ਕਰੋ。
initial	ਇਹ ਵਿਸ਼ੇ ਦਾ ਮੂਲ ਮੁੱਲ ਰੱਖੇ। ਦੇਖੋ: initial。
inherit	ਇਹ ਵਿਸ਼ੇ ਆਪਣੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਇਸ ਵਿਸ਼ੇ ਲੈ ਲਿਆ ਹੈ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

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