<div class="daire">
<div class="duvar">Orijinal Resim</div>
<div class="duvar multiply">multiply</div>
<div class="duvar screen">screen</div>
<div class="duvar overlay">overlay</div>
<div class="duvar darken">darken</div>
<div class="duvar lighten">lighten</div>
<div class="duvar color-dodge">color-dodge</div>
<div class="duvar color-burn">color-burn</div>
<div class="duvar hard-light">hard-light</div>
<div class="duvar soft-light">soft-light</div>
<div class="duvar difference">difference</div>
<div class="duvar exclusion">exclusion</div>
<div class="duvar hue">hue</div>
<div class="duvar saturation">saturation</div>
<div class="duvar color">color</div>
<div class="duvar luminosity">luminosity</div>
</div>
.daire {
display: flex;
flex-wrap: wrap;
}
.duvar {
width: 320px;
height: 211px;
margin: 10px;
background-image: url(https://lh3.googleusercontent.com/S6R3hlIIAUcaGWKadN2mp8myRdFDBFiS3TlLM4NMSSvzE49cMFin_ODX-W69biYjPrISBsvgtuhoYX-87AkXsEe1tgNc5hb2SH47aGM6EkWFyoy8xup8VDqv9g);
background-color: red;
font-size: 24px;
color: #fff;
text-shadow: 3px 3px 3px rgba(0,0,0,.8);
text-align: center;
}
.multiply {
background-blend-mode: multiply;
}
.screen {
background-blend-mode: screen;
}
.overlay {
background-blend-mode: overlay;
}
.darken {
background-blend-mode: darken;
}
.lighten {
background-blend-mode: lighten;
}
.color-dodge {
background-blend-mode: color-dodge;
}
.color-burn {
background-blend-mode: color-burn;
}
.hard-light {
background-blend-mode: hard-light;
}
.soft-light {
background-blend-mode: soft-light;
}
.difference {
background-blend-mode: difference;
}
.exclusion {
background-blend-mode: exclusion;
}
.hue {
background-blend-mode: hue;
}
.saturation {
background-blend-mode: saturation;
}
.color {
background-blend-mode: color;
}
.luminosity {
background-blend-mode: luminosity;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.