前端css中filter(滤镜)的使用

最新推荐文章于 2024-05-23 15:49:45 发布
最新推荐文章于 2024-05-23 15:49:45 发布
阅读量1k 收藏 24
点赞数 23
分类专栏： # css 文章标签： 前端 css filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44925904/article/details/138127353
版权

前端css中filter的使用

一、前言

前面的几篇博文用到了模糊(blur)和阴影(solid)的效果，这些效果有些属于 filter(滤镜) 的属性。filter还有其他属性，下面表格汇总相关的语法。

内容语法说明
模糊blur(A);A填像素值，如5px
阴影drop-shadow(a b c d);a为水平方向阴影位置，正数px向右；b为垂直方向阴影位置，正数px向下；c为阴影的范围，px；d为颜色参数常用rgba的格式
亮度brightness(e)e>1加亮度，e<1减亮度
对比度contrast(f)f>1加对比度，f<1减对比度
灰度grayscale(g)g取0~1的范围，即[0,1]，当1表示完全灰度
反转invert(h)h取0~1的范围，即[0,1]，当1表示完全反转颜色
饱和度saturate(i)i>1加饱和度，i<1减饱和度
褐色效果sepia(j)j取0~1的范围，即[0,1]，当1表示完全褐色
色相旋转hue-rotate(k)k取度数，如：90deg。360度代表完整的色相环，回到初始颜色。

二、补充内容说明

滤镜效果，参照于ps，根据需要对图片进行美化和处理。
本文为举例，创建一个div盒子，把图片插入到盒子中作为背景，实际上是对盒子进行演示，背景属于盒子的一部分同样也会显现效果，盒子为了便于理解取名box_max。
filter的各种属性效果可以混合使用，比如模糊+阴影+亮度。在filter参数设置下，加空格隔开设置便可。

三、模糊

关键词句：filter: blur(5px); /* 添加模糊效果 */
给组件添加模糊效果。可以控制输入的像素值，像素值越高，越模糊。

（一）、模糊效果，源码1

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛764号 Filter 模糊属性的使用</title>
    <style>
        /* 定义主要容器的样式 */
        .box_max {
            width: 90vh; /* 容器的宽度 */
            height: 100vh; /* 容器的高度 */
            background-color: yellowgreen; /* 容器的背景色 */
            display: flex; /* 使用 flex 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 添加平滑过渡效果 */
        }

        /* 定义容器中的图像样式 */
        .box_max img {
            width: 300px; /* 图像的宽度 */
            height: 200px; /* 图像的高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 当鼠标悬停在图像上时，应用模糊效果 */
        .box_max img:hover {
            filter: blur(5px); /* 添加模糊效果 */
        }
    </style>
</head>
<body>

<!-- 主要容器，包含图像 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛764号"> <!-- 图像及其描述 -->
</div>

</body>
</html>

（二）、源码1运行效果

1.视频演示

filter的模糊属性

2.截图演示

  • 鼠标未悬停时，组件的效果截图：
    在这里插入图片描述

  • 鼠标悬停时，模糊的效果截图：
    在这里插入图片描述

四、阴影

关键词句： filter: drop-shadow(10px 15px 20px rgba(176, 20, 158, 0.7)); /* 阴影效果 */

  • drop-shadow(a b c rgba(n,n,n,透明系数));
  • a------水平方向的阴影偏移量，正数向右，负数向左。像素值px。
  • b------垂直方向的阴影偏移量，正数向下，负数向上。像素值px。
  • c------阴影的扩展半径，控制扩展范围。
  • rgba------一种颜色的表现格式，也可以换成其他颜色表现格式，如16进制的#fff。

drop-shadow主要用于元素的外部阴影.若要使用内部阴影，则需要box-shadow,取参数inset。除此，还有给文本添加阴影效果的text-shadow，参数的使用方式和drop-shadow类似。box-shadow不属于filter，关于box-shadow的内容则根据需要另起博文。

（一）、阴影效果，源码2

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 定义容器的样式 */
        .box_max {
            width: 90vh; /* 容器宽度 */
            height: 100vh; /* 容器高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 平滑过渡 */
        }

        /* 定义图像的样式 */
        .box_max img {
            width: 300px; /* 图像宽度 */
            height: 200px; /* 图像高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 悬停效果：添加阴影和改变边框 */
        .box_max img:hover {
            filter: drop-shadow(10px 15px 20px rgba(176, 20, 158, 0.7)); /* 阴影效果 */
 /*           border: 5px solid rgba(218, 34, 197, 0.6); /* 修改边框颜色和透明度 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div>

</body>
</html>

（二）、源码2运行效果

1.视频演示

filter的阴影属性

2.截图演示

  • 鼠标未悬停时，组件的效果截图：
    在这里插入图片描述

  • 鼠标悬停时，阴影的效果截图：
    在这里插入图片描述

五、亮度

关键词句： filter: brightness(1.6); /* 当鼠标悬停时，降低亮度 */
1为原始亮度，大于1图片变亮；反之，参数小于1，这图片变暗。

（一）、亮度效果，源码3

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛764号 Filter 属性的使用</title>
    <style>
        /* 容器样式 */
        .box_max {
            width: 90vh; /* 容器的宽度 */
            height: 100vh; /* 容器的高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 平滑过渡 */
        }

        /* 图像样式 */
        .box_max img {
            width: 300px; /* 图像的宽度 */
            height: 200px; /* 图像的高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 悬停效果 */
        .box_max img:hover {
            filter: brightness(1.6); /* 当鼠标悬停时，降低亮度 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div>

</body>
</html>

（二）、源码3运行效果

1.视频演示

filter的亮度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，亮度为1.6倍效果截图：
    在这里插入图片描述

六、对比度

关键词句： filter: contrast(1.6); /* 悬停时增加对比度 */
1为原始对比度，大于1增加对比渡，小于1减少对比度。

（一）、对比度效果，源码4

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 容器样式 */
        .box_max {
            width: 90vh; /* 宽度 */
            height: 100vh; /* 高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 平滑过渡 */
        }

        /* 图像样式 */
        .box_max img {
            width: 300px; /* 宽度 */
            height: 200px; /* 高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框 */
            border-radius: 5px; /* 圆角 */
        }

        /* 鼠标悬停效果 */
        .box_max img:hover {
            filter: contrast(1.6); /* 悬停时增加对比度 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div>

</body>
</html>

（二）、源码4运行效果

1.视频演示

filter的对比度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，对比度为1.6倍效果截图：
    在这里插入图片描述

七、灰度

关键词句：filter: grayscale(0.9); /* 转换为接近灰度 */
0为没有灰度效果，1表示完全灰度，中间的值相对比重的灰度。

（一）、灰度效果，源码5

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 容器样式 */
        .box_max {
            width: 90vh; /* 容器的宽度 */
            height: 100vh; /* 容器的高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 平滑过渡 */
        }

        /* 图像样式 */
        .box_max img {
            width: 300px; /* 图像的宽度 */
            height: 200px; /* 图像的高度 */
            filter: none; /* 没有滤镜 */
            border: 5px solid greenyellow; /* 边框 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 鼠标悬停效果 */
        .box_max img:hover {
            filter: grayscale(0.9); /* 转换为接近灰度 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div>

</body>
</html>

（二）、源码5运行效果

1.视频演示

filter的灰度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，灰度取0.9效果截图：
    在这里插入图片描述

八、反转

关键词句： filter: invert(1); /* 完全反转颜色 */
0表示没有反转，1表示完全反转，中间部分则按比重进行反转。
为1时为把颜色变为颜色的对立面，接近色相环变180度的效果。关于色相环图片后面的色相旋转部分有所添加。可以进行对比分析。

（一）、反转效果，源码6

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 定义容器的样式 */
        .box_max {
            width: 90vh; /* 容器的宽度 */
            height: 100vh; /* 容器的高度 */
            background-color: yellowgreen; /* 容器的背景颜色 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 添加滤镜过渡效果 */
        }

        /* 定义图像的样式 */
        .box_max img {
            width: 300px; /* 图像的宽度 */
            height: 200px; /* 图像的高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 鼠标悬停时应用反转效果 */
        .box_max img:hover {
            filter: invert(1); /* 完全反转颜色 */
        }
    </style>
</head>
<body>

<!-- 定义容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像及其描述 -->
</div>

</body>
</html>

（二）、源码6运行效果

1.视频演示

filter的反转属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述

  • 鼠标悬停在组件上，反转系数为1，即完全反转效果截图：
    在这里插入图片描述

（一）、饱和度

关键词句：filter: saturate(2); /* 增加饱和度 */
1为初始饱和度，大于1表示增加饱和度，小于1降低饱和度。增加饱和度可以让颜色更鲜艳，降低饱和度可以让颜色显得更柔和。

饱和度效果，源码7

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 定义容器的样式 */
        .box_max {
            width: 90vh; /* 宽度 */
            height: 100vh; /* 高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 平滑过渡效果 */
        }

        /* 图像样式 */
        .box_max img {
            width: 300px; /* 图像的宽度 */
            height: 200px; /* 图像的高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框颜色 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 鼠标悬停时应用饱和度变化 */
        .box_max img:hover {
            filter: saturate(2); /* 增加饱和度 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div>

</body>
</html>

（二）、源码7运行效果

1.视频演示

filter的饱和度属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，2倍饱和度效果截图：
    在这里插入图片描述

九、褐色效果

关键词句：filter: sepia(0.5); /* 添加半褐色效果 */
0为没有褐色效果，1为完全褐色效果，中间值按比重配比褐色效果。此功能可以给照片添加褐色，以达到一种旧照片的效果。

（一）、褐色效果，源码8

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 容器样式 */
        .box_max {
            width: 90vh; /* 宽度 */
            height: 100vh; /* 高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 1s ease; /* 平滑过渡 */
        }

        /* 图像样式 */
        .box_max img {
            width: 300px; /* 图像宽度 */
            height: 200px; /* 图像高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框颜色 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 悬停效果 */
        .box_max img:hover {
            filter: sepia(0.5); /* 添加半褐色效果 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div>

</body>
</html>

（二）、源码8运行效果

1.视频演示

filter的褐色属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，系数取0.5的半褐色效果截图：
    在这里插入图片描述

十、色相旋转

关键词句：filter: hue-rotate(-90deg); /* 色相旋转 -90 度 */
正数顺时针旋转，负数逆时针旋转。上面这行的代码则表示原本的颜色在色相环旋转-90度更换颜色。下图为一张类似于色相环的图片。用我们导入的小蜗牛图片观察，我们小蜗牛图片为接近浅绿色的区域，当下图色相环逆时针转90度后，那么这个区域的位置则变化到红棕色的位置。
另外我们再举一个正90度（+90deg）和180度（180deg）的效果。下面的色相旋转图片作为参考，当然实际机器识别的参数会有所差异的，颜色排序大致是没有问题的。顺时针旋转，则会旋转到蓝绿色区域。180度则会旋转到近紫黑色区域附近。这180度的和反转对比，是不是有点相像。
我们若不想要灰度，褐色效果，可以通过色相旋转，调整好我们需要的颜色对图像进行改变。
请添加图片描述

（一）、色相旋转效果，源码9

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小蜗牛 764 号 Filter 属性的使用</title>
    <style>
        /* 容器样式 */
        .box_max {
            width: 90vh; /* 宽度 */
            height: 100vh; /* 高度 */
            background-color: yellowgreen; /* 背景颜色 */
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            transition: filter 5s linear; /* 平滑过渡 */
        }

        /* 图像样式 */
        .box_max img {
            width: 300px; /* 图像的宽度 */
            height: 200px; /* 图像的高度 */
            filter: none; /* 初始状态没有滤镜 */
            border: 5px solid greenyellow; /* 边框颜色 */
            border-radius: 5px; /* 边框圆角 */
        }

        /* 鼠标悬停效果 */
        .box_max img:hover {
            filter: hue-rotate(-90deg); /* 色相旋转 -90 度 */
        }
    </style>
</head>
<body>

<!-- 容器 -->
<div class="box_max">
    <img src="./小蜗牛.jpg" alt="小蜗牛 764 号"> <!-- 图像描述 -->
</div>

</body>
</html>

（二）、源码9运行效果

1.视频演示

filter的色相旋转属性

2.截图演示

  • 鼠标未悬停在组件上，效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，色相旋转-90度效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，色相旋转90度效果截图：
    在这里插入图片描述
  • 鼠标悬停在组件上，色相旋转180度效果截图：
    在这里插入图片描述

十一、结语

filter中的属性，其中有灰度和褐色效果，这些效果也可以通过色相旋转到达类似的效果。色相旋转可以补足我们想要的其他颜色。此外对于阴影的内容除了本文的drop-shadow，其实还有box-shadow、text-shadow等，但其他的并不属于本文的filter的属性。本文filter的功能更像是类似于ps的效果使用。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

十二、定位日期

2024.4.23；
18:28

小蜗牛764号
关注
  • 23
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端------Filter
04-26 3051
其实数组的很多函数需要的参数都是一样的 arr.fun((item,index,arr)=>{ item:数组的元素 index:数组元素在的位置 arr:整个数组 }) Filter 是数组的一个用法,用来返回一个数组,满足特定条件的数组中的元素 let arr=[1,2,3,4]; let newArr=arr.filter((item,index,arr)=>{ console.log("数组元素${item}"); console.log("
css的filter属性
苏苏就是小苏苏的博客
09-07 518
1.官方文档 注意：Internet Explorer 不支持 filter 属性 https://www.runoob.com/cssref/css3-pr-filter.html 2属性 2.1 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 2.2brightness 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更
CSS:filter属性介绍
qq_45820271的博客
04-10 749
本文介绍了CSS中的filter属性以及基本用法
css filter 属性介绍
最新发布
莫莫博客
05-23 404
请注意， filter 属性可能不会在所有浏览器中都被完全支持，特别是旧版本的浏览器。因此，在使用之前，请确保检查目标浏览器的兼容性。等的可视化效果，如模糊、亮度、对比度、饱和度等。它接受一系列不同的函数值，这些函数值可以组合起来创建复杂的视觉效果。CSS的filter属性提供了对元素。
css3 filter 实现滤镜 模糊 改变色相 黑白照等功能
maoguiyou的专栏
04-30 2381
我说的是css3 filter 和css filter IE 的滤镜完全不是一回事喔，主要是完成一些ps完成的功能，比如黑白照：filter:grayscale(1); 到目前为止，还是保留属性，所以要有节操的加上 浏览器前缀喔。废话少说，列举一些滤镜都有哪些功能： filter:sepia(1)    //图片会变褐色，就是色彩对比度降低，而且变泛黄，听不懂啊，自己试去。
CSS——滤镜（filter ）
YANGMENGZHENG的博客
10-27 3894
前言 滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。 一、什么是滤镜 对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。 二、滤镜的实现---filter属性 1、CSS语法 filter: none | blur() | brightness(.
CSS滤镜（filter）
热门推荐
zg0601的博客
10-23 2万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
CSS的filter属性详解
m0_74293254的博客
11-29 2962
上述代码将给class为"invert-element"的元素应用一个反色效果，使图像的颜色与原来相反，亮度和对比度保持不变。上述代码将给class为"opacity-element"的元素应用一个透明效果，使元素的透明度降低到原来的50%。上述代码将给class为"grayscale-element"的元素应用一个灰度效果，使图像变为原来亮度的50%。上述代码将给class为"grayscale-sepia-saturate"的元素应用一个灰度、褐色和饱和度增强的效果，使图像呈现出复古的灰色调。
CSS filter滤镜属性使用
YunWisdom
12-27 9912
CSS的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。
CSS中的filter(滤镜)
weixin_45663702的博客
05-18 5921
CSS中的filter(滤镜)
CSS3 Filter图片滤镜特效.zip
11-16
总的来说，"CSS3 Filter图片滤镜特效.zip"这个资源包将帮助你探索和实践这些滤镜效果，提升你的前端开发技能，为网站和应用添加更多视觉吸引力。通过实验和组合不同的滤镜，你可以创造出独特的视觉风格，使你的作品...
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
12-16
在前端开发中，CSS3滤镜提供了一种强大的方式来改变元素的视觉表现，其中`filter: blur()`属性尤其引人注目。它允许我们为元素添加模糊效果，从而创造出各种创意设计，如毛玻璃（也称为磨砂玻璃或模糊背景）效果。...
css滤镜实现页面灰色黑白色效果代码
10-30
本篇文章将详细讲解如何使用CSS滤镜来实现页面的灰色黑白色效果。 首先，让我们看看淘宝提供的代码片段： ```css html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: ...
CSS3悬停马赛克样式滤镜特效
06-24
2. **CSS滤镜（Filter）属性**：滤镜属性允许我们对元素内容应用各种视觉效果，如模糊、饱和度调整等。在马赛克效果中，可能使用了`filter: blur()`来模糊图片，创建马赛克效果。同时，可能还使用了`grayscale()`或`...
CSS滤镜（Filter）全攻略
艾恩小灰灰的博客
04-08 1033
CSS滤镜（Filter）是一种强大的视觉效果工具，允许开发者在不借助额外图像处理软件的情况下，直接通过CSS对HTML元素（如图片、文本、背景等）应用各种图像处理效果，如模糊、色调调整、透明度控制等。本文将深入讲解CSS滤镜的各个方面，通过丰富的实例代码和详尽注释，帮助新手读者掌握这一增强网页视觉吸引力的技术。
CSS中filter属性
weixin_45618535的博客
10-31 9131
none适用元素:所有元素；在SVG中，它适用于容器元素，不包括defs元素和所有图形元素否按规定。
CSS常用滤镜讲解
IT_SunFei的博客
03-08 3146
上了点年纪的人一般见过胶卷相机，照片的底片那种效果其实就是图片反转效果。旋转成新的对应颜色。通过设置grayscale(%)将图片转换成灰度图片,值可以是小数和百分数.默认 0。为图像设置高斯模糊,值越大越模糊, 默认是0,既不模糊. 值的单位是。当值超过100%时完全转换成灰度图片,当值为0% 图像无变化。该函数的值为0-1之间的数字或者百分比，默认值为0。所谓色相旋转，就是指将图像中的各种颜色按照给定的角度在。,图像的对比度更加强,意味着图片的鲜艳度更强。图片更加鲜艳了 白的更白,黑的更黑。
CSS滤镜（filter详细介绍）
zhp19513507633的博客
08-09 1076
filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。
css中的filter
cwb_2120的博客
07-06 532
属性允许你在元素上应用各种图像效果，例如模糊、颜色调整、亮度调整等。属性，你可以实现很多有趣的视觉效果。
前端css中class中变量
06-06
在端的CSS中，class中并没有变量的概念。class是用来定义元素的样式的，而不是用来存储数据的。 但是，CSS中可以使用变量来存储和重复使用值。这些变量称为CSS变量或自定义属性（Custom Properties）。 下面是一个示例代码： ``` :root { --main-color: #ff0000; } .my-element { color: var(--main-color); background-color: var(--secondary-color, #000000); } ``` 在这个示例中，`:root`伪类用于定义全局的CSS变量，也称为根元素。`--main-color`是一个CSS变量，它存储了颜色值`#ff0000`。`.my-element`类使用`var()`函数来引用这个变量，从而将颜色应用于文本的颜色属性。`--secondary-color`是另一个CSS变量，它存储了颜色值`#000000`，并且被应用于元素的背景颜色属性。如果没有定义`--secondary-color`，则使用默认值`#000000`。 需要注意的是，CSS变量只能在CSS中使用，不能够在JavaScript中访问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值