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的五大容器布局...

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

Canvas 实现 progress 效果

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

4670
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

1022
来自专栏林德熙的博客

win10 uwp 绘图 Line 控件使用

本文主要讲一个在绘图中,我们会有一个基础的控件,Line。控件的基本使用和他能做出的我们很多时候需要的界面。

692
来自专栏九彩拼盘的叨叨叨

图片不变形,宽高不超出父元素的情况下旋转图片

如题,具体的效果见这里 。做这样的效果的难点在于,计算没旋转前图片的宽,高和旋转后的宽高。

713
来自专栏Linux驱动

28.QT-QPainter介绍

1092
来自专栏向治洪

css3动画从入门到精通

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

3606
来自专栏小白客

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

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

3216
来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

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

从零开始学 Web 之 CSS(一)选择器

CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

844

扫码关注云+社区