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 پشتیبانی می کنند.