如何用 css 修出好看的照片-胡新春个人博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  程序员式幽默
  •  闲言碎语
  •  博客大计事
  •  留言板
  • 
    如何用 css 修出好看的照片
     作者:转载  发布时间:2017-12-25 14:57:09  访客:218

    一 摘要

    我们通常会通过PS,美图秀秀等来编辑照片,制作比较符合意境的的效果图片(图骗),但是编辑器和PS的切换是有成本的,如果能在编辑器中快捷并且批量的处理图片岂不是很好。这篇文章没有多么高深的代码,只是一些平时容易忽略并且很受用的小技巧。

    v2-8e8da41ac67e19c948bc00cf545c7617_r.jpg

    二 修图利器之 CSS Filters

    P图怎么能少了滤镜呢,css提供了很多种的滤镜:

    1. drop-shadow

    2. sepia

    3. blur

    4. hue-rotate

    5. invert

    6. brightness

    7. contrast

    8. opacity

    9. grayscale

    10. saturate

    2.1 drop-shadow 下落式阴影

    添加阴影效果可不只有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给一个元素添加阴影,drop-shadow在图片是非png情况下和box-shadow有些相似,然而png图片才是她大放异彩的地方

    拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的区别:

    v2-e2c450f77713b9c7c1c73eb40f9691e7_hd.jpg

    //从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow
    .drop-shadow-jpg{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));}
    .box-shadow{box-shadow: 10px 10px 10px rgba(255,235,59,0.74);}

    drop-shadow明显更柔和一些,并且图片的上面和左边也是有阴影的哦。

    再来看下drop-shadow在png图片的表现吧,左边为原图:

    v2-266153bc53bf7429baebe8be36f4d423_hd.jpg

    .drop-shadow-png{
        -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74));
    }

    因为png图片背景是透明的,所以drop-shadow直接作用于图片的内容,图中的小女孩是不是更萌了呢。

    2.2 sepia 乌贼墨,深褐色,深棕色

    想要个老照片效果?

    v2-2d88758ebaddf934443d87842e2930a3_hd.jpg

    .sepia-50{
        -webkit-filter: sepia(50%);
    }
    .sepia-100{
       -webkit-filter: sepia(100%)
    } 
    //safari浏览器不支持

    参数可以是小数也可以是百分比,为0的时候是左边原图的效果,1或100%是最右的图

    2.3 blur 模糊

    背景图片太清晰喧宾夺主了,可以设置模糊的效果啊

    v2-dafc4a4be39ae31b3223a63973ec6f34_hd.jpg

    .blur{
        -webkit-filter: blur(3px);
    }

    v2-b90f14acf40ce5dcf5fbd5d9baeb42dc_hd.jpg

    .opacity-20{
        opacity: 0.2;
    }
    .filter-opacity-20{
        filter:opacity(0.2)
    }
    .opacity-both{
        opacity: 0.2;
        filter:opacity(0.2)
    }

    他们接受的参数也是有一些差别的,opacity只能接受小数,filter:opactiy()既可以接受小数也可以接受百分比,值越小越透明。

    2.5 hue-rotate 色相旋转

    hue-rotate通过改变图片的色相来改变图片

    v2-4d1e4663fbf46bd27564c973f8e9cbcd_hd.jpg

    .hue-rotate-90{
        -webkit-filter: hue-rotate(90deg);
    }
    .hue-rotate-270{
        -webkit-filter: hue-rotate(270deg);
    }

    hue-rotate 参数是一个角度值,他会接受这个值并把图片中的颜色的色相做对应的旋转

    2.6 invert 反转

    invert会把图片上的所有颜色进行反转,如果是希望做个相机底片效果,真的是太合适了

    v2-d6219357884fce39f32937429bfa1afc_hd.jpg

    .invert-20{
        filter: invert(20%);
    }
    .invert-100{
        filter: invert(100%)
    }

    和hue-rotate相比,直接反转就用不着接受颜色变化的角度了,但是你可以设置0~100%来控制反转的程度

    2.7 saturate 饱和度

    色彩三要素色相,明度,饱和度。饱和度也即颜色的纯度,彩度。无彩色的色饱和度为0,也就是上面的grayscale灰度值为1的时候,饱和度越高,颜色中的灰度越低

    v2-d88c77da6f27e27df0d156cf003cc336_hd.jpg

    饱和度100%时为原图,接受大于100%的值。

    2.8 brightness 亮度

    说完了色相和饱和度再来看看brightness,brightness给图片应用一种线性乘法来调整整个图片的亮度,效果和手机电脑上的的亮度调节是一样的

    v2-5524287df61e0e3a6623c8a8f8dce235_hd.jpg

    .brightness-4{
        filter:brightness(40%)
    }
    .brightness-8{
        filter:brightness(80%)
    }

    brightness的参数可以用百分比来表示也可以用小数来表示,当参数值为0的时候整个图片都是黑色的了,超过100%的时候比原图更亮一些

    2.9 contrast 对比度

    contrast用来调整图像的对比度

    v2-da3d67aa442839703cfed8b7fb5f42c1_hd.jpg

    .contrast-50 {
        filter: contrast(50%)
    }
    .contrast-200{
        filter:contrast(200%)
    }

    contrast()的参数接受百分比形式的数值也接受小数形式的,值为0 的时候是整个图片都是灰黑色的,为1时是原图,值越大对比度越大,默认值为1。

    2.10 grayscale 灰度模式

    有格调的灰度模式开启

    v2-c3b21e2cd33fa95ae97736c335b4d740_hd.jpg

    .gray-scale-50{
        filter:grayscale(50%)
    }
    .gray-scale-100{
        filter:grayscale(100%)
    }

    grayscale的参数接受百分比和小数,默认参数是100%,完全灰度,1以内的值越大越靠近完全灰度,大于等于1的值的效果是一样哒

    三 修图利器之 Blend Modes

    CSS3的混合模式决定了多个图片/图层叠加在一起的时候显示的效果。关于混合模式的算法可以在维基百科上了解。不同的模式值对应了不同的算法,最后决定了图片混合模式效果。相关的两个属性是mix-blend-mode和background-blend-mode,background-blend-mode主要是作用于同一个background属性下的背景图片或者背景色。

    混合模式的值的对应效果可以完全类比PS中图层模式效果,他们的对应关系是:

    normal 正常模式

    multiply 正片叠底模式

    screen 滤色模式

    overlay 叠加模式

    darken 变暗模式

    lighten 变亮模式

    color-burn 颜色加深模式

    hard-light 强光模式

    soft-light 柔光模式

    difference 差值模式

    exclusion 排除模式

    hue 色相模式

    saturation 饱和度模式

    color 颜色模式

    luminosity 亮度模式


    3.1 mix-blend-mode

    mix-blend-mode主要作用是把目标元素和其下方的背景元素混合。

    v2-7c58d37971842564da5586ea8edf7987_hd.jpg

    图片来自于caniuse.com

    快速开始:

    v2-a45ad501f1878358a3951c824e15f26b_hd.jpg

    这是两张原图

    html

    <div class="mix-blend-mode">
            <img src="./images/girl.jpg" alt="girl.jpg" >
            <img src="./images/minion.jpg" alt="minion.jpg" >
     </div>

    css

    /*让两张图片重叠在一起*/
    .mix-blend-mode{
        position:relative
    }
    .mix-blend-mode img{
        position:absolute
    }

    然后就可以给小黄人图片添加mix-blend-mode啦,因为小女孩图片排在小黄人下面,所以如果给小女孩图片添加效果而不给小黄人添加mix-blend-mode的话是看不到任何效果的。

    v2-237c5f0d5e8afa0791f7ba1280c23760_hd.jpg

    .mix-normal{
        mix-blend-mode: normal;
    }
    .mix-color{
        mix-blend-mode: color;
    }
    .mix-color-burn{
        mix-blend-mode:color-burn;
    }
    .mix-color-dodge{
        mix-blend-mode: color-dodge;
    }
    .mix-darken{
        mix-blend-mode: darken;
    }
    .mix-difference{
        mix-blend-mode: difference;
    }

    v2-dfad529ad33acbf44e6bf49ae7fbbf76_hd.jpg

    .mix-exclusion{
        mix-blend-mode: exclusion;
    }
    .mix-hard-light{
        mix-blend-mode: hard-light;
    }
    .mix-hue{
        mix-blend-mode: hue;
    }
    .mix-inherit{
        mix-blend-mode: inherit;
    }
    .mix-initial{
        mix-blend-mode: initial;
    }
    .mix-lighten{
        mix-blend-mode: lighten;
    }

    v2-2f753314cb2cd53cc92b775d4cc03b7e_hd.jpg

    .mix-luminosity{
        mix-blend-mode: luminosity;
    }
    .mix-overlay{
        mix-blend-mode: overlay;
    }
    .mix-saturation{
        mix-blend-mode: saturation;
    }
    .mix-screen{
        mix-blend-mode: screen;
    }
    .mix-soft-light{
        mix-blend-mode: soft-light;
    }
    .mix-unset{
        mix-blend-mode: unset;
    }

    添加了mix-blend-mode属性的图片除了可以对其下面的图片叠加,还可以对其背景色叠加,左一为原图,依次给右边4张图片添加下面css中的样式,并且给他们的父元素设置蓝色背景,然后,各种艺术形态的小黄人出现了!

    v2-1cdc0f442578c2460587fa9704bf7add_hd.jpg

    .mix-background-lighten{
        mix-blend-mode: lighten;
    }
    .mix-background-screen{
        mix-blend-mode: screen;
    }
    .mix-background-difference{
        mix-blend-mode: difference;
    }
    .mix-background-luminosity{
        mix-blend-mode: luminosity;
    }

    3.2 background-blend-mode

    兼容性如下:

    v2-2669bb82f3acc40c2fe632efa04147b9_hd.jpg

    图片来自caniuse.com

    background-blend-mode顾名思义是作用于background-image,background-color的。并且是写在一个background属性后面的图片,颜色哦。

    v2-4460efadceb8aef0be323cfd7ed43122_hd.jpg

    .background-blend-mode-self{
        background: url(./images/g.jpg) #673AB7 no-repeat;
        background-blend-mode: unset;
    }
    .background-blend-mode-color{
        background: url(./images/g.jpg) #673AB7 no-repeat;
        background-blend-mode: screen;
    }
    .background-blend-mode-luminosity{
        background: url(./images/g.jpg) #673AB7 no-repeat;
        background-blend-mode: luminosity;
    }
    .background-blend-mode-exclusion{
        background: url(./images/g.jpg) #673AB7 no-repeat;
        background-blend-mode: exclusion;
    }
    .background-blend-mode-overlay{
        background: url(./images/g.jpg) #673AB7 no-repeat;
        background-blend-mode: overlay;
    }
    .background-blend-mode-soft-light{
        background: url(./images/g.jpg) #673AB7 no-repeat;
        background-blend-mode: soft-light;
    }

    篇幅有限,其他的background-blend-mode效果就不贴代码啦。


    四 参考文献

    developer.mozilla.org/e

    Blend modes - Wikipedia


    *原文来自:https://zhuanlan.zhihu.com/p/28422426

    点评一下

    
    程序:HXC博客v2.0 主题:HXC博客前端Funs主题    基于CodeIgniter框架构建
    博客平稳运行2年+