用CSS实现各种图片滤镜效果演示

Webhek微博

技术原理

本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter)，利用这些属性，我们可以让同一张图片呈现出各种不可思议的神奇效果。

Image of lighthouse used for CSS image effects demo
原背景图片，未经任何编辑。

下面大多数的效果图中，背景图片源background-image url通常会反复使用数次，同时利用CSS混合模式 (multiply, overlay, screen, difference等)进行处理。

在有一些效果中，使用了一下CSS filter 属性进一步处理图片，比如 grayscale(), brightness(), 和 contrast() 等可以让图片呈现出更好的效果。

制作这个演示时，我们首先让这些图片呈现出原始面貌，然后使用CSS @supports 来检测某种CSS属性是否在你的浏览器中受支持。然后才施加这些效果。

本演示的源代码可以在GitHub上下载。

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference) {
  .pencil-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}

.pencil-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (background-blend-mode: difference) {
		background-image: $url, $url;
		background-blend-mode: difference;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px);
		filter: brightness(2) invert(1) grayscale(1);
		box-shadow: inset 0 0 0 1px black;
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.watercolor-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
  .watercolor-effect:after {
    background-image: url(photo.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}

.watercolor-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
		position: relative;
		overflow: hidden;

		&:before, &:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: cover;
		}

		&:before {
			background-image: $url, $url;
			background-blend-mode: difference;
			background-position:
				calc(50% - 1px) calc(50% - 1px),
				calc(50% + 1px) calc(50% + 1px);
			filter: brightness(2) invert(1) grayscale(1);
			box-shadow: inset 0 0 0 1px black;
		}

		&:after {
			background-image: $url;
			background-position: center;
			mix-blend-mode: multiply;
			filter: brightness(1.3) blur(2px) contrast(2);
		}
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.emboss-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
  .emboss-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference, screen;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    filter: brightness(2) invert(1) grayscale(1);
  }
}

.emboss-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
		background-image: $url, $url, $url;
		background-blend-mode: difference, screen;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px),
			center;
		filter: brightness(2) invert(1) grayscale(1);
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.colored-pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .colored-pencil-effect:before, .colored-pencil-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    box-shadow: inset 0 0 0 1px black;
  }
  .colored-pencil-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
  }
  .colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
  }
}

.colored-pencil-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (mix-blend-mode: color) {
		position: relative;

		&:before,
		&:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: cover;
			box-shadow: inset 0 0 0 1px black;
		}

		&:before {
			background-image: $url, $url;
			background-blend-mode: difference;
			background-position:
				calc(50% - 1px) calc(50% - 1px),
				calc(50% + 1px) calc(50% + 1px);
			filter: brightness(2) invert(1) grayscale(1);
		}

		&:after {
			background: inherit;
			mix-blend-mode: color;
		}
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
  .chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}

.chalkboard-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
		background-image: $url, $url;
		background-blend-mode: difference;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px);
		filter: brightness(1.5) grayscale(1);
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.colored-chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
  .colored-chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: cover;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    background-blend-mode: color, difference;
    filter: brightness(2);
  }
}

.colored-chalkboard-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
		background-image: $url, $url, $url;
		background-size: cover;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px),
			center;
		background-blend-mode: color, difference;
		filter: brightness(2);
	}
}
CSS SCSS CodePen Copy

Implementation

In each of these CSS/SCSS snippets, replace photo.jpg with the URL of the image you are using.

Example HTML

<div class="emboss-effect">
  <img width="" height="" src="photo.jpg" alt="">
</div>

In this implementation, the <img> tag acts as a placeholder, setting the correct aspect ratio for the effect while being visually hidden with CSS. Setting values for the width, height, and alt attributes is recommended.

To try out any effect for yourself, click on the CodePen button.

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.airbrush-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
  .airbrush-effect {
    position: relative;
    overflow: hidden;
  }
  .airbrush-effect:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
    mix-blend-mode: multiply;
  }
}

.airbrush-effect {
  $url : url(photo.jpg);

  background-image: $url;
	background-size: cover;
	background-position: center;

  @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
		position: relative;
		overflow: hidden;

		&:after {
			display: block;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: inherit;
			filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
			mix-blend-mode: multiply;
		}
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.hallucination-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (mix-blend-mode: multiply) {
  .hallucination-effect {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;
  }
  .hallucination-effect:before, .hallucination-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    mix-blend-mode: multiply;
    transform: scale(1.05);
  }
  .hallucination-effect:before {
    background-color: yellow;
    background-blend-mode: screen;
    transform-origin: top left;
  }
  .hallucination-effect:after {
    background-color: cyan;
    background-blend-mode: screen;
    transform-origin: bottom right;
  }
}

.hallucination-effect {
  $url : url(photo.jpg);
  $offset : 5px;

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      mix-blend-mode: multiply;
      transform: scale(1.05);
    }

    &:before {
      background-color: yellow;
      background-blend-mode: screen;
      transform-origin: top left;
    }

    &:after {
      background-color: cyan;
      background-blend-mode: screen;
      transform-origin: bottom right;
    }
  }
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}

.flannel-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: overlay) {
		background-image: $url, $url, $url;
	  background-position: center;
	  background-size: 100%, 100000% 100%, 100% 100000%;
	  background-blend-mode: overlay;
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.low-ink-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-x-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 10000% 100%;
    background-blend-mode: screen, overlay;
  }
}

.low-ink-x-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: screen, overlay) {
		background-image:	 $url, $url, $url;
		background-size: 100% 100%, 10000% 100%;
		background-blend-mode: screen, overlay;
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.low-ink-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-y-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 100% 1000%;
    background-blend-mode: screen, overlay;
  }
}

.low-ink-y-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: screen, overlay) {
		background-image:	 $url, $url, $url;
		background-size: 100% 100%, 100% 1000%;
		background-blend-mode: screen, overlay;
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.collage-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .collage-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}

.collage-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: overlay) {
		background-image: $url, $url, $url, $url, $url, $url;
		background-size: 200%, 80%, 60%, 50%, 40%, 100%;
		background-position: 50%, 80%, 30%, 0;
		background-blend-mode: overlay;
		background-repeat: no-repeat;
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.mosaic-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-size: cover, 5% 5%;
  background-position: center;
  background-blend-mode: overlay;
}

.mosaic-effect {
	$url : url(photo.jpg);

	background-image: $url, $url;
	background-size: cover, 5% 5%;
	background-position: center;
  background-blend-mode: overlay;
}
CSS SCSS CodePen Copy

Image of lighthouse
.photo-border-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

.photo-border-effect {
  $url : url(photo.jpg);

  background-image: $url, $url;
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}
CSS SCSS CodePen Copy

Una Kravets

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.infrared-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}

.infrared-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}
CSS SCSS CodePen Copy

Image of lighthouse
.night-vision-effect {
  background-image: url(photo.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

.night-vision-effect {
	$url : url(photo.jpg);
  $line-width: 5px;

  background-image:
    $url,
    radial-gradient(
      #0F0,
      #000
    ),
    repeating-linear-gradient(
      transparent 0,
      rgba(0,0,0,0.1) $line-width/2,
      transparent $line-width
    );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.warhol-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: color) {
  .warhol-effect {
    background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(photo.jpg);
    background-size: 50% 100%, 50% 100%, 50% 50%;
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: color;
  }
}

.warhol-effect {
  $url : url(photo.jpg);

  background-image: $url;
	background-size: cover;
	background-position: center;

  @supports (background-blend-mode: color) {
		background-image:
	    linear-gradient(
	      #14EBFF 0,
	      #14EBFF 50%,
	      #FFFF70 50%,
	      #FFFF70 100%
	    ),
	    linear-gradient(
	      #FF85DA 0,
	      #FF85DA 50%,
	      #AAA 50%,
	      #AAA 100%
	    ),
	    $url;
		background-size: 50% 100%, 50% 100%, 50% 50%;
	  background-position: top left, top right;
	  background-repeat: no-repeat, no-repeat, repeat;
	  background-blend-mode: color;
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.selective-color-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(3)) and (mix-blend-mode: color) {
  .selective-color-effect {
    position: relative;
  }
  .selective-color-effect:before, .selective-color-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-color: red;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: brightness(3);
  }
}

.selective-color-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: brightness(3)) and (mix-blend-mode: color) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      background-color: red;
      background-blend-mode: screen;
      mix-blend-mode: color;
      filter: brightness(3);
    }
  }
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.mirror-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleX(-1)) {
  .mirror-x-effect {
    position: relative;
  }
  .mirror-x-effect:before, .mirror-x-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit;
  }
  .mirror-x-effect:before {
    left: 0;
    right: 50%;
    transform: scaleX(-1);
  }
  .mirror-x-effect:after {
    left: 50%;
    right: 0;
  }
}

.mirror-x-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (transform: scaleX(-1)) {
		position: relative;

		&:before, &:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			background: inherit;
		}

		&:before {
			left: 0;
			right: 50%;
			transform: scaleX(-1);
		}

		&:after {
			left: 50%;
			right: 0;
		}
	}
}
CSS SCSS CodePen Copy

Image of lighthouse
/** 你的浏览器太过老旧，不支持我们在本演示中需要使用的一些css属性，请升级你的浏览器到最新版本。我们需要使用下面两个CSS属性：
  • filter
  • background-blend-mode
我们使用 CSS @supports 来检测你的浏览器是否支持这些属性。对于不支持这些CSS属性的浏览器，我们将使用备用方案来呈现这些图片效果。 **/
.mirror-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleY(-1)) {
  .mirror-y-effect {
    position: relative;
  }
  .mirror-y-effect:before, .mirror-y-effect:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: inherit;
  }
  .mirror-y-effect:before {
    top: 0;
    bottom: 50%;
    transform: scaleY(-1);
  }
  .mirror-y-effect:after {
    top: 50%;
    bottom: 0;
  }
}

.mirror-y-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (transform: scaleY(-1)) {
		position: relative;

		&:before, &:after {
			display: block;
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			background: inherit;
		}

		&:before {
			top: 0;
			bottom: 50%;
			transform: scaleY(-1);
		}

		&:after {
			top: 50%;
			bottom: 0;
		}
	}
}
CSS SCSS CodePen Copy