您的位置：首页 > 网站优化 > css  >  用CSS实现各种图片滤镜效果演示

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

 更新时间：2017年1月22日 11:03  点击：1822
本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter)，利用这些属性，我们可以让同一张图片呈现出各种不可思议的神奇效果。

原图：

1.jpg

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

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

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

然后才施加这些效果。

效果1：Pencil

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

} 

}

效果2：Emboss

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

}

}

效果3：Colored chalkboard


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

}

}


效果4：hallucination


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

}

}

}


效果5：collage


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

}

}


效果6：infrared


.infrared-effect {

$url : url(photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

filter: hue-rotate(180deg) saturate(2);

}


效果7：selective-color


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

}

}

}


效果8：colored-pencil-effect


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

}

}

}


效果9：photo-border

.photo-border-effect {

$url : url(photo.jpg);

background-image: $url, $url;

background-position: center;

background-size: 60%, 20%;

background-repeat: no-repeat, repeat;

}

效果10：mosaic

.mosaic-effect {

$url : url(photo.jpg);

background-image: $url, $url;

background-size: cover, 5% 5%;

background-position: center;

background-blend-mode: overlay;

}


以上便是用CSS实现各种图片滤镜效果的全部内容了，希望大家在看了之后能有所收获。

[!--infotagslink--]

相关文章

  • Painter绘制红衣喝酒男水粉画效果教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19

  • C#从数据库读取图片并保存的两种方法

    这篇文章主要介绍了C#从数据库读取图片并保存的方法，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2021-01-16

  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程，各位想知道方法的使用者们，那么下面就快来跟着小编一...2016-09-14

  • photoshop用各种素材合成闪电侠效果制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • 美图秀秀把普通照片快速转换成卡通效果教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程，各位想知道具体制作步骤的使用者们，那么下面就快阿里跟着小编一起看一...2016-09-14

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • Photoshop枪战电影海报图片制作教程

    Photoshop的这一款软件小编相信很多的人都已经是使用过了吧，那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程，想知道制作步骤的玩家们，那么下面...2016-09-14

  • photoshop调出时尚个性青色人像照片效果调色教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程，各位想知道到底该怎么调色的，那么下面就快来跟着小编一起看一看...2016-09-14

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • python opencv通过4坐标剪裁图片

    图片剪裁是常用的方法，那么如何通过4坐标剪裁图片，本文就详细的来介绍一下，感兴趣的小伙伴们可以参考一下...2021-06-04