<div class="tlo"><p>Тло</p></div>
<div class="img"><p>Картинка</p></div>
<div class="img blend-color"><p>background-blend-mode:color;</p></div>
<div class="img blend-multiply"><p>background-blend-mode:multiply;</p></div>
<div class="img blend-screen"><p>background-blend-mode:screen;</p></div>
<div class="img blend-overlay"><p>background-overlay-mode:color;</p></div>
<div class="img blend-darken"><p>background-blend-mode:darken;</p></div>
<div class="img blend-lighten"><p>background-blend-mode:lighten;</p></div>
<div class="img blend-color-dodge"><p>background-blend-mode:color-dodge;</p></div>
<div class="img blend-saturation"><p>background-blend-mode:saturation;</p></div>
<div class="img blend-luminosity"><p>background-blend-mode:luminosity;</p></div>
		div {
			display: inline-block;
      height: 250px;
			width: 250px;
		}

    p {
      margin-top:-40px;
      text-align: center;
    }

		.tlo {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9);
		}

		.img {
      margin-bottom: 20px;
			background-image: url(http://lorempixel.com/250/250/people/3);
		}

		.blend-color {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: color;
		}

		.blend-multiply {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: multiply;
		}
		.blend-screen {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: screen;
		}
		.blend-overlay {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: overlay;
		}
		.blend-darken {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: darken;
		}

		.blend-lighten {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: lighten;
		}
		.blend-color-dodge {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: color-dodge;
		}

		.blend-saturation {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: saturation;
		}
		.blend-luminosity {
			background-image: linear-gradient(45deg, #f8a261, #6e9fc9), 
			                  url(http://lorempixel.com/250/250/people/3);
  		background-blend-mode: luminosity;
		}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.