CSS:filter属性介绍

一天只码五十行2024-04-11 13:33

一、filter属性简介

值	描述	示例
blur(Npx)	设置高斯模糊效果。N是模糊半径，值越大，模糊效果越明显。	`filter: blur(5px);`
brightness(%)	调整图像的亮度。百分比值小于100%会使图像变暗，大于100%会使图像变亮。	`filter: brightness(75%);`
contrast(%)	调整图像的对比度。百分比值小于100%会降低对比度，大于100%会提高对比度。	`filter: contrast(150%);`
drop-shadow(h-offset v-offset blur spread color)	为图像添加阴影效果。参数分别表示水平偏移、垂直偏移、模糊半径、阴影扩展半径和阴影颜色。	`filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));`
grayscale(%)	将图像转换为灰度。百分比值表示灰度级别，100%完全灰度，0%无变化。	`filter: grayscale(50%);`
hue-rotate(deg)	改变图像的色相。角度值表示在色相环中旋转的角度。	`filter: hue-rotate(90deg);`
invert(%)	反转图像的颜色。百分比值表示反转强度，100%完全反转，0%无变化。	`filter: invert(75%);`
opacity(%)	设置图像的透明度。百分比值表示透明度级别，0%完全透明，100%完全不透明。	`filter: opacity(50%);`
saturate(%)	调整图像饱和度。百分比值小于100%会降低饱和度，大于100%会提高饱和度。	`filter: saturate(120%);`
sepia(%)	将图像转换为褐色调。百分比值表示褐色级别，100%完全褐色，0%无变化。	`filter: sepia(60%);`

二、使用样例

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>filter</title>
  </head>
  <body>
    <img src="http://cdn.ljynet.com/img/bit.svg" alt="" />
    <style>
      img {
        filter: grayscale(100%) blur(1px);
        transition: all 0.3s;
      }
      img:hover {
        filter: grayscale(0%);
        transition: all 0.3s;
      }
    </style>
  </body>
</html>