用CSS3实现滤镜——常见九种效果

特别强调:IE无法实现!!!
复习时看这个提纲进行回忆并持续补充。

文章目录

  • 一、滤镜是什么
  • 二、滤镜操作
    • 1. 模糊效果
    • 2. 亮度
    • 3. 对比度
    • 4. 图像阴影
    • 5. 图像灰度
    • 6. 反转效果
    • 7. 透明度
    • 8. 棕褐色效果
    • 9. 图像饱和度
  • 三、实战项目

一、滤镜是什么

二、滤镜操作

1. 模糊效果

2. 亮度

3. 对比度

黑白效果可以使用该功能配合灰度实现

4. 图像阴影

5. 图像灰度

6. 反转效果

效果类似底片

7. 透明度

8. 棕褐色效果

9. 图像饱和度

三、实战项目

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滤镜title>
head>
<style>
    img{
        width: 300px;
        height: 300px; 
    }
    .p1{
         /* 参数表述模糊的半径,值越大,图像越模糊 */
         filter: blur(3px);
        /* 不同内核的浏览器,这个是用来提高兼容性的 */
        -webkit-fliter:blur(3px);
    }
    .p2{
        /* 滤镜效果:亮度,最大为200%,此时为白色 */
        filter: brightness(50%);
    }
    .p3{
        /* 图形的对比度,0全黑,1或者100表示不变 */
        filter: contrast(150%);
    }
    .p4{
        /* 把图片换成圆形 */
        border-radius: 50%;
        /* 参数:x(阴影在水平的偏移量),y(阴影在垂直方向的偏移量),r(阴影半径),c(阴影颜色) */
        filter: drop-shadow(10px 10px 5px silver);
    }
    .p5{
        /* 取值范围在0~100%,100%则为彻底洗去颜色的效果 */
        filter: grayscale(100%);
    }
    .p6{
        /* 颜色反转效果,取值范围在0~100% */
        filter: invert(100%);
    }
    .p7{
        /* 设置透明度,0表示完全透明,1表示透明度不变 */
        filter: opacity(80%);
    }
    .p8{
        /* 0表示不变,100%或者1带褐色效果,像是老照片 */
        filter: sepia(50%);
    }
    .p9{
        /* 图像饱和度,0表示不饱和,100%表示图像不变,取值可以超过100% */
        filter: saturate(200%);
    }
style>
<body>
    <img class="p1" src="../img/002.JPG" alt="">
    <img class="p2" src="../img/002.JPG" alt="">
    <img class="p3" src="../img/002.JPG" alt="">
    <img class="p4" src="../img/002.JPG" alt="">
    <img class="p5" src="../img/002.JPG" alt="">
    <img class="p6" src="../img/002.JPG" alt="">
    <img class="p7" src="../img/002.JPG" alt="">
    <img class="p8" src="../img/002.JPG" alt="">
    <img class="p9" src="../img/002.JPG" alt="">
    
body>
html>

用CSS3实现滤镜——常见九种效果_第1张图片

你可能感兴趣的:(css学习笔记,css3,前端,javascript)