CSS mask-composite ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਪਿਛਲਾ ਪੰਨਾ mask-clip
ਅਗਲਾ ਪੰਨਾ mask-image

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

mask-composite ਗੁਣ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਮੌਜੂਦਾ ਮਾਸਕ ਸਤਰ ਅਤੇ ਉਸ ਦੇ ਨੇੜੇ ਦਾ ਮਾਸਕ ਸਤਰ ਕਿਸ ਤਰ੍ਹਾਂ ਦੀ ਕੰਪੋਜਿਸ਼ਨ ਕਰਨਗੇ。

ਉਦਾਹਰਣ

ਪ੍ਰਦਰਸ਼ਨ mask-composite ਗੁਣ ਦੇ ਵੱਖ-ਵੱਖ ਮੁੱਲ:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੇਫਿਕਸ

mask-composite: add|subtract|intersect|exclude|initial|inherit;

ਗੁਣ ਮੁੱਲ

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

ਤਕਨੀਕੀ ਵੇਰਵੇ

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