<div class="container">
  <article class="artwork">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/artwork.jpg" alt="artwork">
  </article>
  
  <article class="artwork2">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/artwork.jpg" alt="artwork">
  </article>
</div>

<p class="p">Demo by Maria Antonietta Perna. <a href="http://www.sitepoint.com/an-introduction-to-the-css-supports-rule-feature-queries" target="_blank">See article</a>.</p>
* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 80%;
  height: auto;
  background-color: #084F66;
  margin: 0 auto;
  padding: 0;
}

article {
  margin: 0 auto 2em;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
/* Testing for 2 conditions with AND: If browser supports both blending with the overlay value AND linear gradients, it will apply the code below */

@supports (mix-blend-mode: overlay) and (background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) {
  .artwork {
    background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
  }
  .artwork img {
    mix-blend-mode: overlay;
  }
}
/* Testing for multiple conditions: unprefixed linear gradients OR prefixed linear gradients AND overlay blend mode */

@supports (mix-blend-mode: luminosity) and ((background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64))) or (background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64)))) {
  .artwork2 {
    background: -webkit-linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
    background: linear-gradient(rgb(12, 185, 242), rgb(6, 49, 64));
  }
  .artwork2 img {
    mix-blend-mode: luminosity;
  }
}
/* Testing 2 conditions with NOT keyword: if the browser does NOT support luminosity AND saturation blend modes, the code below is applied */

@supports not ((mix-blend-mode: luminosity) and (mix-blend-mode: saturation)) {
  .artwork2 img {
    mix-blend-mode: overlay;
  }
}

.p {
  text-align: center;
  padding-top: 50px;
  font-size: 12px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.