<div id="wrapper">
  <span class="img candy"></span>
  <span class="img sign"></span>
  <span class="img candy"></span>
  <span class="img sign"></span>
  <span class="img"></span>
</div>

#blend {
  background-blend-mode: difference;
  background-image: url(//bit.ly/2bgWkX5)
                  , url(//bit.ly/2b2XTrY);
}

/* further code for decoration purposes only */

.candy:first-child 
{
  background-image: url(//bit.ly/2bgWkX5);
}
.candy:nth-child(3) 
{
  background-image: url(//bit.ly/2b2XTrY);
}
/* plus sign */
.sign:nth-child(2)
{
  background-image: url(https://bit.ly/2aXWd4D);
}
/* equal sign */
.sign:nth-child(4) 
{
  background-image: url(https://bit.ly/2bkxUdn);
}
#wrapper 
{
  width: 500px;
  background-color: gold;
  padding: 10px;
  text-align: center;
  margin: auto;
  margin-top: 16px;
}
.img 
{
  width: 80px;
  height: 80px;
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat;
}
.sign 
{
  background-size: 30px 30px;
  background-position: 25px 25px;
}