使用CSS处理图像效果

发布于 大漠

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

处理图像效果的CSS属性

处理图像效果分很多种,比如说:

  • 改变图像大小:使用CSS的widthheight或者使用CSS的transform中的scale
  • 改变图像形状:使用CSS的transform中的skew
  • 改变图像位置:使用CSS的position或者transform中的rotatetranslate
  • 裁剪图像:使用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-modemix-blend-modeisolation三个属性。共中background-blend-mode主要运用元素的背景图片,mix-blend-mode类似于filter用于img元素上,另外isolation主要用来隔离元素。

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

CSS怎么处理图像效果

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

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

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

CSS图像

HTML结构如下:

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

通过结合使用background-blend-modemix-blend-modefilter可以实现不同的效果。来看两个。

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也能像一些制作图软,可以很轻松的实现一些特殊的图像效果。当然,虽然这些属性能帮助我们脱离设计师也能做一些图像处理效果,但是就目前浏览器对其支持度,我们也就只能是玩玩。不过,有总是比没有强,如果你对这些感兴趣,不仿自己尝试写写,看看你写出来的效果是什么样。

最后,期待您的分享。

扩展阅读