高亮的博客

# 滤镜 filter

# CSS滤镜通过filter属性实现，可对元素及其子元素进行实时图像处理，无需修改原始素材。

函数 作用 说明
blur(px) 模糊 数值越大越模糊，例如 blur(5px)
brightness(%) 亮度 100% 为正常，0% 全黑，>100% 变亮
contrast(%) 对比度 100% 正常，0% 灰色，>100% 增强
grayscale(%) 灰度 0% 彩色，100% 黑白
invert(%) 反色 0% 正常，100% 全部反色
sepia(%) 棕褐色 0% 正常，100% 复古棕色
saturate(%) 饱和度 100% 正常，0% 无色，>100% 更鲜艳
hue-rotate(deg) 色相旋转 改变颜色色相，取值角度 0deg~360deg
drop-shadow(x y blur color) 投影 类似 box-shadow，但只作用于元素图像
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS Filter Demo</title>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 10px;
      float: left;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 文字覆盖层 */
    .label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      text-shadow: 0 2px 5px rgba(0,0,0,0.8);
      pointer-events: none; /* 不影响鼠标事件 */
      line-height: 1.4;
    }

    /* 各种滤镜效果 */
    .blur img      { filter: blur(5px); }
    .brightness img{ filter: brightness(1.5); }
    .contrast img  { filter: contrast(200%); }
    .grayscale img { filter: grayscale(100%); }
    .invert img    { filter: invert(100%); }
    .sepia img     { filter: sepia(100%); }
    .saturate img  { filter: saturate(200%); }
    .hue img       { filter: hue-rotate(120deg); }
    .shadow img    { filter: drop-shadow(5px 5px 10px gray); }
  </style>
</head>
<body>
<div class="box blur">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">blur(5px)<br>模糊</div>
</div>

<div class="box brightness">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">brightness(1.5)<br>亮度 +50%</div>
</div>

<div class="box contrast">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">contrast(200%)<br>对比度 ×2</div>
</div>

<div class="box grayscale">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">grayscale(100%)<br>黑白</div>
</div>

<div class="box invert">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">invert(100%)<br>反色</div>
</div>

<div class="box sepia">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">sepia(100%)<br>复古棕色</div>
</div>

<div class="box saturate">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">saturate(200%)<br>高饱和</div>
</div>

<div class="box hue">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">hue-rotate(120deg)<br>色相旋转</div>
</div>

<div class="box shadow">
  <img src="https://picsum.photos/200" alt="demo">
  <div class="label">drop-shadow<br>投影</div>
</div>
</body>
</html>

# 背景滤镜

backdrop-filter;是CSS中的一个图形滤镜属性，主要用于对元素背后的区域（即“背景”）应用滤镜效果。
它通常与半透明背景配合使用，能实现类似“毛玻璃”的视觉效果

backdrop-filter的函数和上面一致

← 盒子模型 →