Background blend mode

by firegroove

HTML

<div class="block multiply">
  <h3>Multiply Mode</h3>
</div>
<div class="block difference">
  <h3>Difference Mode</h3>
</div>
<div class="block darken">
  <h3>Darken Mode</h3>
</div>
<div class="block multi_image">
  <h3>Multiple image</h3>
</div>

CSS

.block {
  background: url(https://static.pexels.com/photos/128458/pexels-photo-128458-tiny.jpeg) no-repeat 0, 0 #99e9ff;
  height: 200px;
  width: 280px;
  float: left;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block h3{
  color:#fff;
}
.multiply {
  background-blend-mode: multiply;
}
.difference {
  background-blend-mode: difference;
}
.darken {
  background-blend-mode: darken;
}
.multi_image{
  background-image:url(https://static.pexels.com/photos/87452/flowers-background-butterflies-beautiful-87452-medium.jpeg), url(https://static.pexels.com/photos/128458/pexels-photo-128458-tiny.jpeg);
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply;
}