CSS中神奇的filter属性

最新推荐文章于 2025-04-29 09:52:04 发布

小五Five

最新推荐文章于 2025-04-29 09:52:04 发布

阅读量1.9k

点赞数 29

分类专栏： JavaScript 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_42373175/article/details/134989502

版权

CSS是Web开发中不可或缺的一部分，它可以帮助开发者在页面上添加各种各样的样式和效果。其中一个比较神奇的CSS属性就是`filter`，它可以让我们实现各种有趣的图形处理效果。

一、filter属性的基础

`filter`属性是CSS中用于对元素进行图形效果处理的属性之一。它可以应用不同的函数来实现各种滤镜效果，例如模糊、灰度、对比度调整等。

下面是一个使用`filter`属性的基本示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .filter {
      width: 200px;
      height: 200px;
      filter: grayscale(100%);
    }
  </style>
</head>

<body>
  <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.3ELT6GcFbfPHHauNUSTDwgHaHa?w=202&h=202&c=7&r=0&o=5&pid=1.7" alt="">
  <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.3ELT6GcFbf