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

相关文章

来自专栏恰童鞋骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

15730
来自专栏一个爱吃西瓜的程序员

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

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

36260
来自专栏肖蕾的博客

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

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

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

CSS 基础

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

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

Canvas 实现 progress 效果

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

63300
来自专栏AndroidTv

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

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

12030
来自专栏hbbliyong

HTML之marquee(文字滚动)详解

语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hell...

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

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

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

10440
来自专栏IMWeb前端团队

Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用j...

27570
来自专栏十月梦想

表格属性(特有)

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

10630

扫码关注云+社区

领取腾讯云代金券