Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="infra-1"></div>
<div class="infra-2"></div>
<div class="infra-3"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin fade-it($img, $shadow: #536) {
  background: url('#{$img}'), $shadow;
  background-blend-mode: lighten;
}

.apply-base {
  @include fade-it('img/ex.jpg');
}

.apply-unique-shade {
  @include fade-it('img/ex2.jpg', #293e78);
}

@mixin three-dee($img, $dist: 5px, $width: 500px, $height: 500px) {
    z-index: 1;
    width: $width;
    height: $height;
    background: url('#{$img}'), cyan;
    background-blend-mode: lighten;
    background-size: cover;
  
  &:after {
    content: '';
    position: absolute;
    display: block;
    width: $width;
    height: $height;
    z-index: 2;
    margin-left: $dist;
    background: url('#{$img}'), red;
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
  }
}

.cats-in-action {
  @include three-dee('img/cat.jpg', 5px, 800px, 600px);
}

@mixin infrared($img, $deg: -60) {
    margin: 2em;
    display: block;
    width: 600px;
    height: 400px;
    position: relative;
    background: url('#{$img}');
    background-size: cover;
  
  &:after {
    content: '';
    display: block;
    height: 400px;
    width: 600px;
    background:  url('#{$img}');
    -webkit-filter: invert(1) saturate(.75) hue-rotate(#{$deg}deg);
    filter: invert(1) saturate(.75) hue-rotate(#{$deg}deg);
    mix-blend-mode: color;
    background-size: cover;
  }
}

.infra-1 {
  @include infrared('http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg');
}


.infra-2 {
  @include infrared('https://guidetoiceland.is/image/4830/x/0/mountains-in-iceland-2.jpg', 80);
}


.infra-3 {
  @include infrared('https://trafalgarblog.files.wordpress.com/2014/09/new-hampshire-lake.jpg', 40);
}

SassMeister-output.css

.apply-base {
  background: url("img/ex.jpg"), #536;
  background-blend-mode: lighten;
}

.apply-unique-shade {
  background: url("img/ex2.jpg"), #293e78;
  background-blend-mode: lighten;
}

.cats-in-action {
  z-index: 1;
  width: 800px;
  height: 600px;
  background: url("img/cat.jpg"), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.cats-in-action:after {
  content: '';
  position: absolute;
  display: block;
  width: 800px;
  height: 600px;
  z-index: 2;
  margin-left: 5px;
  background: url("img/cat.jpg"), red;
  background-blend-mode: lighten;
  background-size: cover;
  mix-blend-mode: darken;
}

.infra-1 {
  margin: 2em;
  display: block;
  width: 600px;
  height: 400px;
  position: relative;
  background: url("http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg");
  background-size: cover;
}
.infra-1:after {
  content: '';
  display: block;
  height: 400px;
  width: 600px;
  background: url("http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg");
  -webkit-filter: invert(1) saturate(0.75) hue-rotate(-60deg);
  filter: invert(1) saturate(0.75) hue-rotate(-60deg);
  mix-blend-mode: color;
  background-size: cover;
}

.infra-2 {
  margin: 2em;
  display: block;
  width: 600px;
  height: 400px;
  position: relative;
  background: url("https://guidetoiceland.is/image/4830/x/0/mountains-in-iceland-2.jpg");
  background-size: cover;
}
.infra-2:after {
  content: '';
  display: block;
  height: 400px;
  width: 600px;
  background: url("https://guidetoiceland.is/image/4830/x/0/mountains-in-iceland-2.jpg");
  -webkit-filter: invert(1) saturate(0.75) hue-rotate(80deg);
  filter: invert(1) saturate(0.75) hue-rotate(80deg);
  mix-blend-mode: color;
  background-size: cover;
}

.infra-3 {
  margin: 2em;
  display: block;
  width: 600px;
  height: 400px;
  position: relative;
  background: url("https://trafalgarblog.files.wordpress.com/2014/09/new-hampshire-lake.jpg");
  background-size: cover;
}
.infra-3:after {
  content: '';
  display: block;
  height: 400px;
  width: 600px;
  background: url("https://trafalgarblog.files.wordpress.com/2014/09/new-hampshire-lake.jpg");
  -webkit-filter: invert(1) saturate(0.75) hue-rotate(40deg);
  filter: invert(1) saturate(0.75) hue-rotate(40deg);
  mix-blend-mode: color;
  background-size: cover;
}

SassMeister-rendered.html

<div class="infra-1"></div>
<div class="infra-2"></div>
<div class="infra-3"></div>