CSS3 图片滤镜

最新推荐文章于 2024-04-15 15:31:49 发布
最新推荐文章于 2024-04-15 15:31:49 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： 前端学习笔记

转载地址:http://www.zhanxin.info/development/2012-12-19-css-filter.html


对图片的处理有很多方法，今天介绍下 CSS3 的图片滤镜。例如灰度，模糊，饱和，老照片等图片滤镜效果。

我们可以使用 CSS3 来实现以下的效果(由于该属性只有 webkit 内核的浏览器支持，建议使用 chrome 阅读，demo 可见)：

如何使用 CSS3 滤镜？

很简单，就如同其他的 CSS 属性一样就可以了：

img {
    filter: type(value);
}

和其他的部分 CSS 属性类似，我们需要兼容其他的浏览器写法，不过目前，只有-webkit这样的写法（即chrome和safari）支持：

img {
    filter: type(value);
    -webkit-filter: type(value);
    -moz-filter: type(value);
    -ms-filter: type(value);
    -o-filter: type(value);
}

OK, 下面我们来一一介绍：

CSS Greyscale

Greyscale 这个属性，将会使图片变灰。属性值(value)既可以是分数，也可以是百分数，它的作用是使图片更灰或者不灰。

DEMO 演示

demo
实现代码

HTML:

<div class="greyscale">
    <img src="images/water.jpg" />
</div>

CSS:

.greyscale img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.greyscale img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
}

CSS Blur

Blur 滤镜是使图片模糊。模糊的层度来自于设置的属性值。

DEMO 演示
demo
实现代码

HTML:

<div class="blur">
    <img src="images/water.jpg" />
</div>

CSS:

.blur img {
    filter: url(/static/svg/filter.svg#blur);
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
.blur img:hover {
    filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
}

CSS Saturate

Saturate 效果可以增加图片的颜色饱和度。这里的属性值是饱和度的比例，例如百分之两百，而百分之百则是不变。

DEMO 演示
demo
实现代码

HTML:

<div class="saturate">
    <img src="images/water.jpg" />
</div>

CSS:

.saturate img {
    filter: saturate(500%);
    -webkit-filter: saturate(500%);
    -moz-filter: saturate(500%);
    -o-filter: saturate(500%);
    -ms-filter: saturate(500%);
}
.saturate img:hover {
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -o-filter: saturate(100%);
    -ms-filter: saturate(100%);
}

CSS Sepia

Sepia 滤镜对图片的处理效果，犹如回到了五六十年代的那种老照片了。

DEMO 演示
demo
实现代码

HTML:

<div class="sepia">
    <img src="images/water.jpg" />
</div>

CSS:

.sepia img {
    filter: sepia(1);
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
    -o-filter: sepia(1);
    -ms-filter: sepia(1);
}
.sepia img:hover {
    filter: sepia(0);
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -o-filter: sepia(0);
    -ms-filter: sepia(0);
}

CSS Hue Rotate

Hue Rotate 滤镜是对色相进行旋转，通过色相的旋转，我们可以对图片的色彩进行重组。属性值为 360 度里的值。

DEMO 演示
demo
实现代码

HTML:

<div class="hue-rotate">
    <img src="images/water.jpg" />
</div>

CSS:

.hue-rotate img {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover {
    filter: hue-rotate(0);
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -o-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
}

CSS Invert

Invert 滤镜是反相效果，看起来就像老相机的底片一样。

DEMO 演示
demo
实现代码

HTML:

<div class="invert">
    <img src="images/water.jpg" />
</div>

CSS:

.invert img {
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
}
.invert img:hover {
    filter: invert(0);
    -webkit-filter: invert(0);
    -moz-filter: invert(0);
    -o-filter: invert(0);
    -ms-filter: invert(0);
}

CSS Brightness

Brightness 滤镜是对图片的亮度进行处理，属性值为百分比。

DEMO 演示
demo
实现代码

HTML:

<div class="brightness">
    <img src="images/water.jpg" />
</div>

CSS:

.brightness img {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
}
.brightness img:hover {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
}

CSS Contrast

Contrast 滤镜是对图片最亮的地方和最暗的地方进行调整，从而改变图片的均衡感。

DEMO 演示
demo
实现代码

HTML:

<div class="contrast">
    <img src="images/water.jpg" />
</div>

CSS:

.contrast img {
    filter: contrast(0.3);
    -webkit-filter: contrast(0.3);
    -moz-filter: contrast(0.3);
    -o-filter: contrast(0.3);
    -ms-filter: contrast(0.3);
}
.contrast img:hover {
    filter: contrast(1);
    -webkit-filter: contrast(1);
    -moz-filter: contrast(1);
    -o-filter: contrast(1);
    -ms-filter: contrast(1);
}

CSS Opacity

Opacity 这个滤镜估计就比较熟悉了，是使图片透明。

DEMO 演示
demo
实现代码

HTML:

<div class="opacity">
    <img src="images/water.jpg" />
</div>

CSS:

.opacity img {
    opacity:0.3;
}
.opacity img:hover {
    opacity:1;
}

结语

本文译自 CSS3 Image Filters，略有不同。经过测试发现，如今的 Firefox 不支持 CSS 的filter属性，如要使用，可以通过使用svg来解决。


CSS H5仿Instagram应用图片滤镜效果.zip
07-11
<link rel="stylesheet" type="text/css" href="css/default.css?3.1.64"> <link rel="stylesheet" href="css/demo-site.min.css?3.1.64"> </head> <body>[removed][removed] <section class="demo__section"> <div class="demo__input-area">  <fieldset class="demo__option-field"> <legend>Choose a sample image:</legend>  <img >  <img >  <img >  <img >  <img > <br> <label class="demo__input-label">  Or paste in a link to your own photo:  <input class="demo__input-img" type="text"> </label>  </fieldset> 这是一份CSS H5仿Instagram应用图片滤镜效果，需要的朋友可以下载使用
CSS3 - filter(图像滤镜)
资深程序员
09-24 2619
前言 该函数为图片做一些视觉上的处理，fillter() 支持以下图像滤镜处理： 语法 描述 none 默认值，没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 brightness(%) 给图片应用一种线...
遇见CSS3滤镜
huobengle
12-26 156
译自：http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/Jeffrey Way于2011年12月22日 译者：蒋宇捷（转载请标明出处-http://blog.youkuaiyun.com/hfahe） ------教程详细内容• 主题：CSS滤镜• 可用性： Webkit每晚构建的版本• 酷炫程度：1...
css3滤镜
honey_seve7n的博客
10-13 351
css3提供了fiter属性，可以对图片做特效处理，如模糊，亮度，对比度等 常用写法： -webkit-filter:blur(1px) /*兼容Chrome, Safari, Opera */ filter:blur(1px) 常用的效果有： blur（px） 高斯模糊 brightness(%) 亮度（0-100%） contrast(%) 对比度  drop-shadow(水...
CSS3 滤镜
weixin_30872789的博客
04-07 115
了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下 语法 filter: function(param); 很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有 grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert...
纯CSS3图片滤镜效果.zip
07-11
纯CSS3图片滤镜效果是现代网页设计中一个引人注目的特性，它允许开发者无需借助JavaScript或者其他图像处理软件，就能直接在浏览器中为图片应用各种视觉特效。这个压缩包"纯CSS3图片滤镜效果.zip"很可能包含了若干...
JS+CSS3图片滤镜颜色设置特效.zip
10-05
"JS+CSS3图片滤镜颜色设置特效.zip" 提供了一种使用JavaScript和CSS3技术实现图片滤镜和颜色调整的解决方案。这个压缩包可能包含一个或多个示例文件，如HTML、CSS和JavaScript文件，用于演示如何动态地改变图片的...
纯CSS3图片滤镜效果特效代码
03-20
效果描述： 之前看到一个网站，用户上传自己喜欢的图片到服务器端，服务器会有一个类似滤镜的功能 将图片渲染完毕后再返回客户端，非常好玩 今天特意整理了一个用纯CSS3实现的滤镜图片效果供给大家参考 使用方法： 1...
纯CSS3图片滤镜效果
06-12
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px;... 今天特意整理了一个用纯CSS3实现的滤镜图片效果供给大家参考   使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
css3 滤镜
web_hj的博客
04-25 269
1.图像转换为灰度图像 <img src='../../images/a.png' class='pic'> .pic{ filter: grayscale(100%); //数值越大 灰度效果越明显 100%则完全转为灰度图像 0%图像无变化 } 2.高斯模糊 <img src='../../images/a.png' class='pic'> ...
CSS3滤镜
DGL_优快云的博客
08-31 377
1 滤镜 之前我们要处理一张图片的取色，模糊，褐色等效果必须使用 Photoshop 处理完后保存多张图片，而 CSS3 滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过 filter 滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等 1.1 定义和使用 filter 属性定义了元素(通常是 img)的可视效果(例如：模糊与饱和度)。 filter 滤镜，借鉴了 Photoshop 的滤镜效果，在 p
CSS3滤镜（filter）
最新发布
qq_44741577的博客
04-15 586
filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现。
css3图片滤镜
yan7_7的博客
12-22 341
滤镜
css3图片滤镜filter
ron_wang_的博客
08-16 307
使用filter给图片添加样式 filter: blur() 模糊程度 brightness() 亮度 contrast() 对比度 opacity() 透明度 saturate() 饱和度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
css3为图片添加滤镜(filter)
low666的博客
05-07 1967
css3为图片添加滤镜(filter) css3 filter语法解析 filter: none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() |sepia() | url(); 属性 解释 举例 ...
css3的滤镜
m0_53644435的博客
10-27 254
目录 一、滤镜是什么？ 二、滤镜的实现：filter属性 1.模糊效果： 2.设置图像的亮度 3.图像的对比度 4.阴影效果 5.其他属性 一、滤镜是什么？ 对图像、图像进行的视觉处理(模糊、饱和度、对比度等) 二、滤镜的实现：filter属性 1.模糊效果： blur(number),number越大图像越模糊 2.设置图像的亮度 brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比 3.图像的对比度...
CSS3的滤镜
weixin_62343228的博客
11-04 655
CSS3的滤镜CSS3的滤镜1.什么是滤镜2.滤镜的实现3.常用的滤镜函数（1）模糊效果（blur（））（2）图像亮度（brightness（））（3）图像的对比度（contrast（））（4）阴影效果（drop-shadow（））（5）将图像转化为灰度（grayscale（））（6）图像的反转（invert（））（7）透明度（opacity（））（8）棕褐色效果（sepia（））（9）图像的饱和度（saturate（）） CSS3的滤镜 1.什么是滤镜 CSS3滤镜是对图像等图形元素执行视觉效果的操作，如
css3 filter滤镜
in1tial的博客
08-29 842
css3滤镜用法 本来看网上说支持的浏览器不多而且只有webkit浏览器支持。所以在写滤镜是要添加 -webkit-前缀 笔者尝试在win10 edge浏览器同样已经支持而且可以些 -webkit-前缀，也可以不写。不禁感慨edge确实不是以前颇为让人诟病的ie了
纯CSS3实现图片滤镜效果的使用方法
纯CSS3图片滤镜效果特效代码的知识点涵盖了CSS3中用于图像处理的新特性，这包括了各种滤镜功能，它们可以让设计师不用依赖JavaScript或图像处理软件，直接在网页上创造视觉效果。这些知识点可以帮助开发者增强网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值