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 条评论
登录 后参与评论

相关文章

来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

1103
来自专栏静晴轩

CSS征途之Background点滴

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

3284
来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

953
来自专栏小白客

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3316
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

要实现轮播图,必须在首尾添加图片,如果直接在 html 代码直接添加图片的话,由于图片的数量是不固定的,那么每次图片的数量发生改变的话,不仅需要设置 html ...

1121
来自专栏用户3211691的专栏

前端面试题2(CSS)

对BFC规范(块级格式化上下文:block formatting context)的理解?

1110
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

1004
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

3806
来自专栏腾讯IVWEB团队的专栏

Canvas 实现 progress 效果

分享下一个简单的Canvas插件 ,Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用javascript用它来绘制图形。

5020
来自专栏一“技”之长

标签之美二——文本标签 原

定义字体大小:size  例如<font size="4"></font>设置其中文字字号为4。

552

扫码关注云+社区