前端开发者学堂 - fedev.cn

使用CSS处理图像效果

#CSS处理图像效果#CSS混合模式#会员专栏
发布于 大漠

一直以来在大家的印象中，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着CSS的技术发展以及浏览器更新，前端人员通过CSS也可以做一些图像的处理。今天就是想跟大家聊聊如何通过CSS来处理图像效果。

处理图像效果的CSS属性

处理图像效果分很多种，比如说：

  • 改变图像大小：使用CSS的width和height或者使用CSS的transform中的scale
  • 改变图像形状：使用CSS的transform中的skew
  • 改变图像位置：使用CSS的position或者transform中的rotate、translate
  • 裁剪图像：使用CSS的clip（现在该属性已被clip-path取代）
  • 改变图像透明度：使用CSS的opacity

上面这些是早前在Web中处理图像常看到的方式方法，但在处理图片的制作软件中，有一个图片叠加的功能。而这种功能才是处理图像效果的一种利器，我们常称之为叠加模式（其实就是图层的叠加模式）。其制作出来的图像效果，跟我们前面所说的都不一样。那么问题来了，在Web中如何使用CSS的属性来实现类似的效果呢？

时至今日，CSS的发展让我们具备了一些这方面的能力，当然，接下来介绍的内容，只适合在某特定浏览器中才会有效果，所以在此建议您使用Chrome最新版本浏览下面示例效果。

CSS滤镜

CSS提供了一种称之为滤镜特性，这种特性能帮助我们更好的处理图像的效果，比如改变图像的色值、亮度、饱和度等等。

CSS滤镜

比如上图看到的效果，就是通过CSS中滤镜规范中的filter属性实现的各种不同效果。当然除了filter属性之外，还有一个backdrop-filter属性，我们常称之为高级滤镜。使用它能处理更多的图片效果，比如大家在iOS设备中常看到的毛玻璃效果：

CSS滤镜

当然，在此希望你不要纠结过多的设备支持性和兼容性。另外在这里不会像大家阐述如何使用这些属性，如果你从未接触过这方面的内容，建议你先移步阅读下面两篇文章做一些相关知识的了解：

CSS混合模式

在CSS中除了使用滤镜可以帮助我们处理图像之外，还有一个非常类似于PhotoShop制作软件中的图层混合模式特性，我们把它称之为CSS混合模式。

使用CSS处理图像效果

CSS的混合模式，提供了background-blend-mode、mix-blend-mode和isolation三个属性。共中background-blend-mode主要运用元素的背景图片，mix-blend-mode类似于filter用于img元素上，另外isolation主要用来隔离元素。

有关于这方面的详细介绍，建议您点击这里阅读相关文章。

CSS怎么处理图像效果

事实上，上面提到的CSS属性，不管是CSS中的filter还是mix-blend-mode都可以帮助我们在Web中处理一些图像的效果。但往往使用这些单一属性，达到的效果并不是非常的完美，那么也就是说，如果我们在实际处理图像的过程中，把background-blend-mode、mix-blend-mode和filter结合在一起来处理，是不是效果会更好些呢？

@Bennett Feely写了一个有关于使用background-blend-mode、mix-blend-mode和filter处理图像效果的小仓库。感兴趣的同学可以看看。下面我们来简单的看一两个小示例。

在接下来的示例中，有一张这样的图像素材：

CSS图像

HTML结构如下：

<div class="colored-pencil-effect">
    <img src="593px-Point_Reyes_Lighthouse.jpg">
</div>

通过结合使用background-blend-mode、mix-blend-mode和filter可以实现不同的效果。来看两个。

colored-pencil

.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;
        }
    }
}

代码并不复杂，上面展示的是SCSS代码，最终看到的效果如下：

Infrared

这里就给大家展示两个示例效果，有关于更多的示例效果可以猛击@Bennett Feely提供的《Image Effects With CSS》。当然你也可以开启你的脑洞，使用类似的方法创造出其他的图像效果。我想你一定行的。

除此之外，早前@una使用CSS的混合模式，也提供过一些有关于一些示例：

总结

当你看到这里的时候，一定会觉得CSS非常的强大，或许你以前都不敢想象，原来CSS也能像一些制作图软，可以很轻松的实现一些特殊的图像效果。当然，虽然这些属性能帮助我们脱离设计师也能做一些图像处理效果，但是就目前浏览器对其支持度，我们也就只能是玩玩。不过，有总是比没有强，如果你对这些感兴趣，不仿自己尝试写写，看看你写出来的效果是什么样。

最后，期待您的分享。

扩展阅读