<div id="container">
  <h3>background-blend-mode</h3>
  <div id="inputs">
    <select name="mode">
      <option value="normal">normal</option>
      <option value="multiply">multiply</option>
      <option value="screen">screen</option>
      <option value="overlay">overlay</option>
      <option value="darken">darken</option>
      <option value="lighten">lighten</option>
      <option value="color-dodge">color-dodge</option>
      <option value="color-burn">color-burn</option>
      <option value="hard-light">hard-light</option>
      <option value="soft-light">soft-light</option>
      <option value="difference">difference</option>
      <option value="exclusion">exclusion</option>
      <option value="hue">hue</option>
      <option value="saturation">saturation</option>
      <option value="color">color</option>
      <option value="luminosity">luminosity</option>
    </select>
  </div>
  <div id="element"></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");

/* --- Стиль квадратного элемента --- */
#element {
  background-blend-mode: normal;
  background-color: #B71C1C;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://images.unsplash.com/photo-1448518184296-a22facb4446f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ');
  width: 240px;
  height: 240px;
  margin: 24px auto;
  padding: 24px;
  border: 12px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* --- Стиль остальных элементов --- */
body {
  font-family: Inconsolata;
  background-color: #f5f5f5;
  text-align: center;
}

#inputs select {
  font-family: Inconsolata;
  font-size: 16px;
}

h3 {
  font-size: 24px;
  font-size: 20px;
  font-weight: bold;
  color: #39a1f4;
 }
jQuery(document).ready(function($){
  $('[name="mode"]').on('change', function(){
    $('#element').css({
      'background-blend-mode': $(this).val()
    })
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js