【CSS3】CSS3 滤镜实现

作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜、JS+DIV或VML处理!

本篇只做CSS3的滤镜实现,其他具体可以来源文章

CSS3 Filter兼容性表如下:

滤镜实现效果图:

PC显示:

手机显示:

相关代码:

1.HTML 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
    <title>CSS3 滤镜实现</title>
    <link href="css/20160110.css" rel="stylesheet" />
</head>
<body>
    <div style="display: table; text-align: center; width: 100%; height: 100%;">
        <div style="display: table-cell; vertical-align: middle;">
            <div class="div_20160110">
                <img src="img/img_20160110.jpg" class="" alt="原图" title="原图" />
                <img src="img/img_20160110.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
                <img src="img/img_20160110.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
                <img src="img/img_20160110.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
                <img src="img/img_20160110.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
                <img src="img/img_20160110.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
                <img src="img/img_20160110.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
                <img src="img/img_20160110.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
                <img src="img/img_20160110.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
                <img src="img/img_20160110.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
            </div>
        </div>
    </div>
</body>
</html>

2.CSS 代码

.div_20160110 img {
    max-width: 150px;
    max-height: 150px;
}

.sepia { /**  格式,filer: sepia(效果范围)
     *  效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果
     */
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);
}

.grayscale { /**  格式,filer: grayscale(效果范围)
     *  效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果
     */
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.blur { /**  格式,filer: blur(模糊半径)
     *  模糊半径,取值范围0~Npx,0为无效果
     */
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.invert { /**  格式,filer: invert(效果范围)
     *  效果范围,取值范围0~1或0~100%,0为无效果,1或100%表示最大效果
     */
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
    filter: invert(1);
}

.saturate { /**  格式,filer: saturate(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果,0为灰度图
     */
    -webkit-filter: saturate(2);
    -moz-filter: saturate(2);
    -o-filter: saturate(2);
    -ms-filter: saturate(2);
    filter: saturate(2);
}

.contrast { /**  格式,filer: contrast(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
    -webkit-filter: contrast(2);
    -moz-filter: contrast(2);
    -o-filter: contrast(2);
    -ms-filter: contrast(2);
    filter: contrast(2);
}

.brightness { /**  格式,filer: brightness(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
    -webkit-filter: brightness(2);
    -moz-filter: brightness(2);
    -o-filter: brightness(2);
    -ms-filter: brightness(2);
    filter: brightness(2);
}

.hue-rotate { /**  格式,filer: hue-rotate(效果范围)
     *  效果范围,取值范0deg~365deg,0(默认值)为无效果
     */
    -webkit-filter: hue-rotate(200deg);
    -moz-filter: hue-rotate(200deg);
    -o-filter: hue-rotate(200deg);
    -ms-filter: hue-rotate(200deg);
    filter: hue-rotate(200deg);
}

.drop-shadow { /**  格式,filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
     *  x-offset和y-offset为阴影的相对于元素左上角的位移距离;
     * 注意:
     *     1. 阴影的外观受border-radius样式的影响;
     *     2. :after和:before等伪元素会继承阴影的效果。
     */
    -webkit-filter: drop-shadow(1px 1px 0px #333);
    -moz-filter: drop-shadow(1px 1px 0px #333);
    -o-filter: drop-shadow(1px 1px 0px #333);
    -ms-filter: drop-shadow(1px 1px 0px #333);
    filter: drop-shadow(1px 1px 0px #333); /*圆角*/
    border: solid 2px #e00;
    -webkit-border-radius: 1px;
}

测试地址:http://ycdoit.com/test/2016/20160110.html

时间: 2024-10-12 04:57:11

【CSS3】CSS3 滤镜实现的相关文章

css3的滤镜模糊的效果

最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 opacity: 0.5;      filter:alpha(Opacity=50); } 1.filter:对IE设置半透明滤镜效果,filter:alpha( Opacity=50)代表该对象50%半透明,支持IE8及以下浏览器.2.opacity:css3属性,对除IE外所有浏览器支持包括

css: CSS3 filter(滤镜) 的使用

CSS3 filter(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度). 定义和使用 默认值 none 继承 no 动画支持 是.详细可查阅 CSS 动画 版本 CSS3 JavaScript 语法 object.style.WebkitFilter="grayscale(100%)" CSS 语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | graysca

Css3 filter(滤镜)

2015-12-20  17:05:13 css3的filter滤镜效果.... css3的filter滤镜效果,filter是W3C CSS filter Effect 1.0中定义的滤镜效果,一个使用CSS来改变图片的模糊度.亮度.对比度.饱和度等等效果的过滤器. index.html中的代码如下: style.css中样式设置为: 其中,background-attachment属性用于定义背景图片随滚动轴的移动方式,取值: scroll | fixed | inherit: scroll

css3 filter滤镜

功能: 滤镜可以对图片,进行色彩上的处理. 用法: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 示例: 自己做了一个可调节的滤镜,链接:http://ljhgr.ccaeo.com/link/filter/index.html 后语: 可以用滤

CSS3 greyscale 滤镜实现

CSS: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(gray.svg#grayscale); filter: gray; } HTML: <img src="http://image.zhangxinxu.

CSS3 grayscale滤镜图片变黑白实例页面

CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }

CSS3 grayscale滤镜图片变黑白

1. 使整个页面的图片都变成灰色的,代码如下. html{     font-size: 100%;     -webkit-text-size-adjust: none;    -ms-text-size-adjust: none;    filter: grayscale(100%);     -webkit-filter: grayscale(100%);     -moz-filter: grayscale(100%);     -ms-filter: grayscale(100%);

[HTML5 + CSS3]css3主要选择器

css3选择器为我们带来了很多便利,以前只能用JS或特定元素增加特定CLASS实现效果,下面用实例记录/分享下每个css3选择器的作用. (1)毗邻元素选择器 x + y <!-- css --> <style type="text/css"> div ul + p { background:#F00; } </style> <!-- 标签 --> <div> <ul>我是ul</ul> <p&g

[css3]CSS3选择器:nth-child和:nth-of-type之间的差异

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标

CSS3—CSS3和现代Web设计

CSS3和现代Web设计 1.1 现代Web设计理念 1.1.1 可访问性第一 同样一段内容, 可以用成千上万的方法为其设计样式, 但全世界的用户应该依然可以访问它们, 不管他们用什么方式去访问Web——无论手机.键盘控制器还是屏幕阅读器. 因此关于锁定那些没有使用矫正光泽水准的设备的用户是很重要的. 1.1.2 可用性其次 当用户访问网站中的内容和服务的时候, 他们能理解并且找到他们想要的信息吗? 为什么人们不多思考:对于浏览他们网站的用户来说, 什么信息是最有用的, 然后如何展现这些信息才能