ویژگی mix-blend-mode در CSS

mix-blend-mode Property

ویژگی mix-blend-mode در CSS مشخص می کند که محتوای یک عنصر چگونه با محتوای عنصر والد و پس زمینه عنصر ترکیب شود.

نحوه نوشتار

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

مقادیر

blend-mode (نوع ترکیب)

مشخص می کند که چگونه عناصر با یکدیگر ترکیب شوند.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<body>
    <div class="isolate1">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </body>
  <div class="isolate2">
      <div class="circle2 circle-1-2"></div>
      <div class="circle2 circle-2-2"></div>
      <div class="circle2 circle-3-2"></div>
    </div>
  </body>
  <div class="isolate3">
      <div class="circle3 circle-1-3"></div>
      <div class="circle3 circle-2-3"></div>
      <div class="circle3 circle-3-3"></div>
    </div>
  </body>

css

.circle,
.circle2,
.circle3  {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
}
.circle {
    mix-blend-mode: screen; 
}
.circle2 { 
    mix-blend-mode: multiply; 
}
.circle3 { 
    mix-blend-mode: luminosity; 
}
.circle-1,
.circle-1-2,
.circle-1-3  {
    background: red;
}
.circle-1-2 { left: 140px; }
.circle-1-3 { left: 280px; }
.circle-2,
.circle-2-2,
.circle-2-3  {
    background: lightgreen;
}
.circle-2 { left: 40px; }
.circle-2-2 { left: 180px; }
.circle-2-3 { left: 320px; }
.circle-3,
.circle-3-2,
.circle-3-3  {
    background: blue;
    top: 40px;
}
.circle-3 { left: 20px;; }
.circle-3-2 { left: 160px; }
.circle-3-3 { left: 300px; }
.isolate1,.isolate2,.isolate3 {
     isolation: isolate; 
     position: relative;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی CSS پشتیبانی می کنند.