个性化阅读
专注于IT技术分析

css3 滤镜filters – CSS3高级教程

点击下载

上一章CSS3高级教程请查看:css3 flexbox弹性布局

CSS3滤镜效果提供了一种将视觉效果应用于图像的简单方法。

了解CSS3的过滤功能

在这一章中,我们将讨论CSS3中引入的过滤器效果,你可以使用它来执行视觉效果操作,例如在将图像绘制到web页面之前,对图形元素(如图像)执行模糊、平衡对比度或亮度、颜色饱和度等。

可以使用CSS3筛选器属性将筛选效果应用于元素,该属性按提供的顺序接受一个或多个筛选器功能。

filter:	 blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

警告: 目前任何版本的Internet Explorer都不支持CSS3过滤效果,旧版本的IE支持一个非标准的滤镜属性来创建像不透明度这样的效果,但是这个功能已经被弃用了。

模糊的效果

使用blur()函数可以将Photoshop中的高斯模糊效果应用到元素上,这个函数接受CSS长度值作为参数,它定义了模糊半径,较大的值会产生更多的模糊,如果没有提供参数,则使用值0。

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

上面示例的输出将类似如下:

CSS3模糊滤镜

设置图像亮度

brightness()函数可用于设置图像的亮度,0%的值将创建一个完全黑色的图像。然而,如果值为100%或1,则图像保持不变,其他值是对效果的线性乘数。

你也可以把亮度设置得比100%高,这样可以得到更亮的图像,如果缺少amount参数,则使用值1。不允许有负值。

img.bright {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}

上面示例的输出将类似如下所示:

CSS3亮度滤镜

注意: 接受百分号(例如75%)表示的值的滤镜函数也接受十进制表示的值(例如0.75)。如果该值无效,则函数返回none,并且不应用滤镜效果。

调整图像对比度

contrast()函数的作用是: 调整图像的对比度。0%的值将创建一个完全黑色的图像。然而,如果值为100%或1,则图像保持不变。值超过100%也是允许的,这提供了较少的对比结果。如果缺少或省略了amount参数,则使用值1。

img.bright {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
img.dim {
    -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
    filter: contrast(50%);
}

上面示例的输出将类似如下:

CSS3对比度滤镜

添加投影到图像

可以使用drop-shadow()函数将投影效果应用到Photoshop等图像上。这个函数类似于box-shadow属性。

img {
    -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(4px 4px 10px orange);
}

上面示例的输出将类似如下所示

CSS3投影滤镜

注意: drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移量,而第三个参数指定模糊半径,最后一个参数指定阴影颜色,就像box-shadow属性一样,除了一个例外,不允许使用’inset’关键字。

将图像转换为灰度

可以使用grayscale()函数将图像转换为灰度,100%的值是完全灰色的, 0%的值使图像保持不变,值之间的0%和100%是线性乘数的影响。如果缺少amount参数,则使用0值。

img.complete-gray {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

上面示例的输出将类似如下所示

css3灰度滤镜

在图像上应用色调旋转

color -rotate()函数对图像应用色调旋转,传递的参数定义了图像样本将被调整的颜色圆的度数,0度的值使图像保持不变,如果缺少“angle”参数,则使用0deg值,不存在最大值。

img.hue-normal {
    -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(150deg);
}
img.hue-wrap {
    -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(480deg);
}

上面示例的输出将类似如下所示

在图像上应用色调旋转

反转效果

像Photoshop这样的反转效果可以用invert()函数应用到图像上,100%或1的值是完全相反的,0%的值保持输入不变,值之间的0%和100%是线性乘数的影响,如果缺少“amount”参数,则使用0值,不允许有负值。

img.partially-inverted {
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}
img.fully-inverted {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}

上面示例的输出将类似如下所示

css3反转效果

对图像应用不透明度

opacity()函数可以用于应用透明度的图像。0%的值是完全透明的, 值为100%或1时,图像保持不变,值之间的0%和100%是线性乘数的影响。如果缺少“amount”参数,则使用值1。这个函数类似于不透明度属性。

img {
    -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
    filter: opacity(80%);
}

上面示例的输出将类似如下所示

css3不透明度滤镜

应用Sepia效果的图像

sepia()函数的作用是: 将图像转换为sepia。值为100%或1时,完全为棕褐色。0%的值使图像保持不变。值之间的0%和100%是线性乘数的影响。如果缺少“amount”参数,则使用0值。

img.complete-sepia {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}
img.partial-sepia {
    -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
    filter: sepia(30%);
}

上面示例的输出将类似如下所示

应用Sepia效果的图像

提示: 在摄影术语中,棕褐色调是一种特殊的处理方法,使黑白照片的色调更温暖(红褐色),以提高其档案质量。

调整图像的饱和度

saturate()函数的作用是: 调整图像的饱和度。0%的值是完全不饱和的,100%的值保持图像不变。其他值是对效果的线性乘数,数值超过100%也允许,提供超饱和的结果。如果缺少“amount”参数,则使用值1。

img.un-saturated {
    -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
    filter: saturate(0%);
}
img.super-saturated {
    -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
    filter: saturate(200%);
}

上面示例的输出将类似如下所示

调整图像的饱和度

注意: url()函数指定对特定筛选器元素的筛选器引用。例如,url (commonfilters.svg#foo)。如果过滤器引用一个不存在的元素,或者引用的元素不是一个过滤器元素,那么整个过滤器链将被忽略,则元素没有应用过滤器。

赞(0)
未经允许不得转载:srcmini » css3 滤镜filters – CSS3高级教程

评论 抢沙发

评论前必须登录!