CSS mix-blend-mode ਪ੍ਰਤੀਯੋਗ ਪੈਰਾਮੀਟਰ

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

mix-blend-mode ਗੁਣ ਨਾਲ ਨਿਰਧਾਰਿਤ ਹੁੰਦਾ ਹੈ ਕਿ ਸਮਾਨ ਦਾ ਸਮਾਨਤਾ ਕਿਵੇਂ ਸਿੱਧੇ ਪੈਰ ਪਿੱਨ ਨਾਲ ਮਿਲਣਾ ਚਾਹੀਦਾ ਹੈ।

ਇਸ ਤੋਂ ਵੀ ਦੇਖੋ:

CSS ਸਬੰਧੀ ਪੁਸਤਕ:CSS background-blend-mode ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਲਾਲ ਪਿੱਨ ਵਾਲਾ ਕੰਟੇਨਰ ਅਤੇ ਇਸ ਲਾਲ ਕੰਟੇਨਰ ਨਾਲ ਮਿਲਣ ਵਾਲੀ ਛਾਪ (ਗਹਿਰਾ):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

ਖ਼ੁਦ ਮੰਗਲਨ ਕਰੋ

ਪੰਨੇ ਦੇ ਹੇਠਾਂ ਹੋਰ TIY ਉਦਾਹਰਨ ਮਿਲ ਸਕਦੇ ਹਨ。

CSS ਗਰੇਫਟੀ

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
normal ਇਹ ਮੂਲ ਮੁੱਲ ਹੈ। ਮਿਕਸ ਮੋਡ ਨੂੰ ਆਮ ਸੈਟ ਕਰੋ。
multiply ਮਿਕਸ ਮੋਡ ਨੂੰ multiply ਸੈਟ ਕਰੋ。
screen ਮਿਕਸ ਮੋਡ ਨੂੰ screen ਸੈਟ ਕਰੋ。
overlay ਮਿਕਸ ਮੋਡ ਨੂੰ overlay ਸੈਟ ਕਰੋ。
darken ਮਿਕਸ ਮੋਡ ਨੂੰ darken ਸੈਟ ਕਰੋ。
lighten ਮਿਕਸ ਮੋਡ ਨੂੰ lighten ਸੈਟ ਕਰੋ。
color-dodge ਮਿਕਸ ਮੋਡ ਨੂੰ color-dodge ਸੈਟ ਕਰੋ。
color-burn ਮਿਕਸ ਮੋਡ ਨੂੰ color-burn ਸੈਟ ਕਰੋ。
difference ਮਿਕਸ ਮੋਡ ਨੂੰ difference ਸੈਟ ਕਰੋ。
exclusion ਮਿਕਸ ਮੋਡ ਨੂੰ exclusion ਸੈਟ ਕਰੋ。
hue ਮਿਕਸ ਮੋਡ ਨੂੰ hue ਸੈਟ ਕਰੋ。
saturation ਮਿਕਸ ਮੋਡ ਨੂੰ saturation ਸੈਟ ਕਰੋ。
color ਮਿਕਸ ਮੋਡ ਨੂੰ color ਸੈਟ ਕਰੋ。
luminosity ਮਿਕਸ ਮੋਡ ਨੂੰ luminosity ਸੈਟ ਕਰੋ。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: normal
ਵਿਰਾਸਤੀ: ਨਹੀਂ
ਆਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰਥ ਨਹੀਂ ਹੈ। ਕੀਤੇ ਪੜ੍ਹੋ:ਆਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ.
JavaScript ਗਰੇਫਟੀ: object.style.mixBlendMode = "darken"

ਹੋਰ ਉਦਾਹਰਨ

ਉਦਾਹਰਣ

ਸਭ ਮੁੱਲਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

ਖ਼ੁਦ ਮੰਗਲਨ ਕਰੋ

ਉਦਾਹਰਣ

mix-blend-mode ਦੀ ਮਦਦ ਨਾਲ ਰੈਸਪੋਨਸਿਵ ਕਟਆਊਟ/ਨਾਕਆਊਟ ਟੈਕਸਟ (ਕਟਆਊਟ ਟੈਕਸਟ) ਬਣਾਓ:

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

ਖ਼ੁਦ ਮੰਗਲਨ ਕਰੋ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਪੂਰਣ ਸਮਰਥਨ ਕਰਨ ਵਾਲੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਨੂੰ ਸਿਫਾਰਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ。

ਚਰਮੀ IE / ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
41.0 79.0 32.0 8.0 35.0