CSS3 滤镜技巧与细节

今天主要介绍 CSS3 滤镜的使用方法,希望能给读者带来一些帮助!下面直接进入正文,本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜。简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,如果你以前没有接触过,相信看了会有很大的收获。

CSS 语法

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


浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号,紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

1.png


基本用法

下面会一一介绍每一个属性的用法,特别注意一下,本文所有的效果都是在 Chrome 61.0.3163.100 下运行的,如果你的浏览器不支持,请用最新的 Chrome 进行查看。

特别说明一点,如果参数是百分比,则可以用小数代替,如 filter: brightness(50%) 和 filter: brightness(.5) 是相等的;


blur:给图像设置高斯模糊,参数是一个长度值,不能用百分比,如果没有设置,则默认是0;值越大越模糊,如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter blur 高斯模糊</title>
<style>
.blur {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}
</style>

</head>
<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="blur">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右边是 blur 后的效果。

3.jpg


brightness:给图片应用一种线性乘法,使其看起来更亮或更暗。参数是一个百分比,如果是0%,图像会全黑,是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter brightness</title>
<style>
.brightness {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}

.brightness2 {
    -webkit-filter: brightness(150%); /* Chrome, Safari, Opera */
    filter: brightness(150%);
}
</style>

</head>
<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="brightness">
    <img src="pineapple.jpg" class="brightness2">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,中间是 brightness(50%), 右边是 brightness(150%)。

4.jpg


contrast:调整图像的对比度。参数是一个百分比,值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter contrast</title>
<style>
.contrast {
    -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
    filter: contrast(50%);
}

.contrast2 {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(300%);
}
</style>

</head>

<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="contrast">
    <img src="pineapple.jpg" class="contrast2">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,中间是 contrast(50%), 右边是 contrast(300%)。

5.jpg


drop-shadow:给图像设置一个阴影效果。该函数与 box-shadow 属性很相,除了 box-shadow 中的 "inset" 参数以外,其余参数都相同。不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter drop-shadow</title>
<style>
.dropshadow {
    -webkit-filter: drop-shadow(8px 8px 10px #000); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px #000);
}
</style>

</head>

<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="dropshadow">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右侧是添加阴影后的效果,四个参数分别为:水平阴影的位置,可以是负值、垂直阴影的位置,可以是负值、模糊距离、阴影大小、阴影颜色。

QQ截图20170928125400.jpg


grayscale:将图像转换为灰度图像,值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter grayscale</title>
<style>
.grayscale {
    -webkit-filter: grayscale(75%); /* Chrome, Safari, Opera */
    filter: grayscale(75%);
}
</style>

</head>
<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="grayscale">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右侧是75%的灰度值。

6.jpg


hue-rotate:给图像应用色相旋转。参数是一个角度值,为 0deg 时图像无变化。若值未设置,默认值是 0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter hue-rotate</title>
<style>
.hue-rotate {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}
</style>
</head>

<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="hue-rotate">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右侧是90deg的色相旋转。

7.jpg


invert:反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter invert</title>
<style>
.invert {
    -webkit-filter: invert(20%); /* Chrome, Safari, Opera */
    filter: invert(20%);
}
</style>
</head>

<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="invert">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右侧是50%的反转图像。

8.jpg


opacity:转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,同 CSS opacity 相同,这里不再介绍。

saturate:转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter opacity</title>
<style>
.saturate {
    -webkit-filter: saturate(20%); /* Chrome, Safari, Opera */
    filter: saturate(20%);
}
</style>
</head>

<body>
    <img src="pineapple.jpg">
    <img src="pineapple.jpg" class="saturate">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右侧是50%的饱和度。

9.jpg


sepia:将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0,如:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter sepia</title>
<style>
.sepia {
    -webkit-filter: sepia(50%); /* Chrome, Safari, Opera */
    filter: sepia(50%);
}
</style>
</head>

<body>
    <img src="http://www.runoob.com/try/demo_source/pineapple.jpg">
    <img src="http://www.runoob.com/try/demo_source/pineapple.jpg">
</body>
</html>

运行以上代码,会看到如下效果,左边是原图,右侧是50%的深褐色。

10.jpg


实例效果

最后,我们来利用 CSS3 的动画,做一个文字整合的效果,大体效果如下:

10.gif

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter blur</title>
<style>
html, body {
    height: 100%;
    width: 100%;
    background-color: black;
    overflow: hidden;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    filter: contrast(20);
    background-color: black;
    overflow: hidden;
}

h1 {
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 5s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
}

@keyframes letterspacing {
    0% {
        letter-spacing: -2.2rem;
        filter: blur(.3rem);
    }
    
    50% {
        filter: blur(.5rem);
    }
    
    100% {
        letter-spacing: .5rem;
        filter: blur(0rem);
        color: #fff;
    }
}
</style>
</head>

<body>
    <div>
        <h1>Blur word Animation</h1>
    </div>
</body>
</html>


总结

以前确实很少使用 filter ,今天大体整理一下,感觉功能确实很强大,不过,就是兼容性还不太好。做为一名程序员,要熟悉每一个参数的使用,而不要紧紧是看一下效果。


未经允许不得转载:易读小屋  »  CSS3 滤镜技巧与细节