在CSS中编辑图像：组合技术

在本系列的最后两个教程中，我们讨论了滤镜和混合模式如何完全改变图像的外观。 在本教程中，我将同时使用这两个属性，介绍编辑图像的基础知识。

基础

任何非原始图像编辑通常都需要多个元素。 这可以通过伪元素来实现。 不幸的是，还有另一种复杂性。 img元素位于替换的元素下方。 结果， :before和:after不适用于图像标签。 要解决此问题，我们将需要在图像周围使用包装纸，并且在这种情况下， figure标签似乎是最佳的选择。 因此，我们的标记应如下所示：

<figure>
  <img src="image-url">
</figure>

我们将创建的所有编辑效果都将具有一些通用的核心CSS。

figure {
  position: relative;
}

figure:before,
figure:after {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

我使用了:before和:after伪元素，以便可以应用各种混合模式。 请注意，我已将width和height设置为100％以正确覆盖figure ，并且使用绝对定位来实现完美对齐。

在大多数情况下，我们将在图像上应用滤镜，并对伪元素使用混合模式和其他效果。 下面的图像是我们将要编辑的原始图像。

高对比度灰度图像

要创建高对比度的图像，您可以将对比度设置为较高的值，但是增加亮度可使效果更加生动。 如果您仅使用过滤器，那便是您所能做的。 但是，使用混合模式时，您还可以向图像中添加带有overlay混合的插图框阴影，以获得更好的效果。 这是此效果CSS：

img {
  filter: contrast(1.8) brightness(1.5) grayscale(1);
}

figure:before {
  z-index: 3;
  mix-blend-mode: overlay;
  box-shadow: 0 0 200px black inset;
}

添加z-index可使伪元素保持在图像上方。 应用盒阴影后，我使用了叠加混合模式来使图像保持较暗的状态。

尝试将鼠标悬停在下面的图片上，以查看滤镜以及滤镜和混合模式组合的区别。

作为练习，您可以在CodePen演示中为box-shadow属性尝试不同的值。

使图像看起来更旧

大多数老照片中的颜色通常会消失，并且它们的外衬为红棕色。 要重新创建相同的效果，我们将不得不使用更多的元素和过滤器。 这是我们CSS：

img {
  filter: saturate(0.6);
}

figure {
  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 250px brown inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 150px pink inset;
  background: rgba(198, 155, 0, 0.3);
}

这次，我在图像和图形上都应用了过滤器。 基本上，我们希望图像不那么彩色。 这可以通过使用值小于1的饱和滤镜来实现。在所有混合之后应用图形滤镜。 如果不应用这些滤镜，则最终结果将具有更加突出的棕色阴影，这是不希望的。

您应该注意，我还在两个伪元素上应用了半透明的带红色背景。 这使图像具有红褐色的外观。 盒子阴影用于使轮廓保持相对棕色。

您应该在演示中尝试各种属性，以查看是否可以获得更好的结果。

添加特定的色相

这次我们将尝试使图像具有蓝色调。 与暖色相比，添加诸如蓝色之类的冷色阴影可以使我们的眼睛容易看到图像。

这是我们需要应用CSS：

img {
  filter: brightness(1.1) contrast(1.3);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;
}

figure:after {
  z-index: 3;
  mix-blend-mode: difference;
  background: rgba(0, 0, 255, 0.3);
}

首先，我们增加图像的亮度和对比度。 这样可以确保我们的图像在编辑过程中不会丢失突出的色彩并且不会变得太暗淡。

通常，您必须使用多个具有较浅颜色的box-shadow进行明显的更改。 这就是为什么我在图像box-shadow添加了两个带蓝色box-shadow 。 仅使用box-shadow会将蓝色box-shadow限制在我们图像的边界。 为了在整个图像上散布蓝色，我将其用作:after伪元素的背景。 这是所有这些过滤器的最终结果：

尝试在演示中为图像添加绿色或红色色调。

淡黄雾

您是否曾经目睹过多云的夜晚，由于风将沙粒悬浮在大气中？ 在这些天气条件下，所有物体的颜色都呈淡黄色，物体似乎有些暗淡。 要重新创建相同的效果，我们需要以下CSS：

img {
  filter: saturate(0.2);
}

figure {
  filter: contrast(1.8) brightness(1.1) saturate(1.5);
}

figure:before {
  z-index: 2;
  mix-blend-mode: multiply;
  box-shadow: 0 0 100px rgba(0,0,0,0.5) inset;
  background: rgba(125, 100, 0, 0.3);
}

figure:after {
  z-index: 3;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 500px rgba(0,0,0,0.6) inset;
  background: rgba(198, 155, 0, 0.3);
}

我要做的第一件事是降低图像饱和度。 :before和:after伪元素都具有半透明的淡黄色背景，以添加所需的色相。 在:after上使用hard-light混合模式会使雾度更加突出。

伪元素上的box-shadow增加了对骑车人的关注。 最后，对我们的figure元素应用高contrast ， brightness和saturation滤镜可增强雾度。

在演示中 ，您可以为各种属性尝试不同的值，以查看它们如何影响最终结果。

最后的想法

在CSS中编辑图像并不难。 如果您牢记我在本教程中讨论的要点，则可以创建自己的一些惊人的过滤器。

作为练习，您可以尝试本教程中的演示，或尝试重新创建流行的Instagram过滤器。 如果需要一些现成的滤镜，您还可以查看Envato市场中可用的各种动画和效果 。

翻译自: https://code.tutsplus.com/tutorials/editing-images-in-css-combining-techniques--cms-26061