CSS3 -webkit-filter 滤镜

HTML5学堂:在早期网页要实现图片的色相旋转、灰色度的变化,只能用ie的滤镜来实现。直到CSS3出来之后,可以用filter来实现了,接下来详细的了解filter的使用

语法:

选择器 {
filter: none  |  <filter-value> [ <filter-value> ]*
}

语法分析:

属性值的归纳

none–默认值

grayscale(value)–灰度,value:0~1;

sepia(value)–褐色,value:0~1;

saturate(value)–饱和度,value:number;

hue-rotate(value)–色相旋转,value:angle;

invert(value)–反色,value:0~1;

opacity(value)–透明度,value:0~1;

brightness(value)–亮度,value:0~1;

contrast(value)–对比度,value:number;

blur(value)–模糊,value:length;

drop-shadow(value)–阴影value:h-shadowv-shadowblur

效果实战练习

我们需要不断的实战帮助我们去加深理解,因此我们需要知道filter是如何使用的

结构代码

<div class="h5course">
<img src="h5course.jpg">
</div>

样式代码:

.h5course {
overflow: hidden;
position: relative;
width: 500px;
height: 500px;
}
.h5course img {
width: 100%;
}
.h5course span {
position: absolute;
top: 220px;
width: 100%;
height: 60px;
line-height: 60px;
background: rgba(0,0,0,0.5);
text-align: center;
font-family: "微软雅黑";
font-size: 40px;
font-weight: bold;
color: #fff;
z-index: 2;
}

效果如下:

基本结构已经完成,接下来我们来实现以下的几个效果

1. 灰色度 - grayscale

样式代码:

.h5course img {
width: 100%;
-webkit-filter: grayscale(1);
}

效果如下:

咱们可以发现,图片变成灰色了。大家可以改改值,看看有什么变化。

2.复古 - sepia

样式代码:

.h5course img {
width: 100%;
-webkit-filter: sepia(1);
}

效果如下:

3. 色相旋转 - hue-rotate

样式代码

.h5course img {
width: 100%;
-webkit-filter: hue-rotate(30deg);
}

效果图如下

咱们修改hue-rotate的角度,可以看到图片的颜色变了。其原理是:按照色相环进行旋转,顺时针方向,红 - 橙 - 黄 - 黄绿 - 绿 - 蓝绿 - 蓝 - 蓝紫 - 紫 - 紫红 - 红)此处为叠加黄色滤镜。

4. 阴影 - drop-shadow

代码样式

.h5course {
padding: 5%;
}
.h5course img {
width: 100%;
-webkit-filter: drop-shadow(5px 5px 5px #ccc);
}

效果如下

其实图片阴影和盒阴影是一样的,只是drop-shadow给图片加的。

5. 自定义效果

样式代码

.h5course img {
width: 100%;
-webkit-filter: saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}

效果如下

如上图所示,我们可以知道filter是可以设置多个值的,每个值以空格隔开。

兼容性:

目前来说,兼容这个属性的浏览器很少,只有webkit内核浏览器支持,因此在移动端上使用会比较广泛

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

3056
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

1767
来自专栏非著名程序员

基础篇章:React Native 之 View 和 Text 的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 从今天开始我们进入基础组件也就是一些简单控件...

1985
来自专栏walterlv - 吕毅的博客

UWP 流畅设计中的光照效果(容易的 RevealBorderBrush 和不那么容易的 RevealBackgroundBrush)

2018-04-15 01:37

302
来自专栏程序员的诗和远方

Tips-移动端滑动固顶效果(position: sticky)

先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 pos...

2696
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3204
来自专栏项勇

笔记74 | 学习掌握ConstraintLayout的基本属性

1635
来自专栏前端杂货铺

关于IE6的PNG图像透明使用AlphaImageLoader的缺点

PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景。而目前的解决方案就是 IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改,而是对相应的h...

3498
来自专栏落花落雨不落叶

js简单实现div宽度匀速增加/减小

2647
来自专栏前端儿

移动端前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件

562

扫描关注云+社区