CSS 滤镜和混合模式 11

WEI_Gaot
256 阅读8分钟

详细梳理一下 CSS 中用于滤镜 (Filters) 和 混合模式 (Blend Modes) 的所有主要属性及其属性值。这些属性可以让你对元素（或其背景、或元素与其下方内容的组合）应用各种图形效果，类似于图像编辑软件中的功能。

一、 CSS 滤镜 (Filters)

滤镜通过 filter 和 backdrop-filter 属性应用。

  1. filter

    • 作用: 将图形效果（如模糊、颜色偏移等）应用于元素本身及其内容。

    • 值: none (默认值) 或一个或多个滤镜函数 (filter functions) ，用空格分隔。多个滤镜会按顺序依次应用。

    • 滤镜函数:

      • blur(<length>) : 应用高斯模糊。<length> 值越大越模糊，不允许负值。如 blur(5px)。
      • brightness(<number-percentage>) : 调整亮度。0% 全黑，100% (或 1) 原始亮度，大于 100% 更亮。如 brightness(150%), brightness(0.7)。
      • contrast(<number-percentage>) : 调整对比度。0% 全灰，100% (或 1) 原始对比度，大于 100% 对比度更高。如 contrast(200%), contrast(0.5)。
      • drop-shadow(<offset-x> <offset-y> <blur-radius>? <color>?) : 应用一个投影效果（类似 box-shadow，但作用于元素的不透明区域轮廓，包括文本和透明 PNG 的形状）。参数含义同 text-shadow。如 drop-shadow(4px 4px 8px rgba(0,0,0,0.5))。
      • grayscale(<number-percentage>) : 将元素转为灰度。0% (或 0) 原始颜色，100% (或 1) 完全灰度。如 grayscale(1)。
      • hue-rotate(<angle>) : 在色轮上旋转色相。<angle> 单位是 deg, rad, grad, turn。如 hue-rotate(90deg)。
      • invert(<number-percentage>) : 反转颜色。0% (或 0) 原始颜色，100% (或 1) 完全反相。如 invert(100%)。
      • opacity(<number-percentage>) : 调整透明度 (效果类似 opacity 属性，但可能利用 GPU 加速)。0% (或 0) 完全透明，100% (或 1) 完全不透明。如 opacity(50%)。
      • saturate(<number-percentage>) : 调整饱和度。0% (或 0) 完全不饱和（灰度），100% (或 1) 原始饱和度，大于 100% 更饱和。如 saturate(250%), saturate(0.2)。
      • sepia(<number-percentage>) : 应用褐色效果。0% (或 0) 原始颜色，100% (或 1) 完全褐色。如 sepia(0.8)。
      • url(<url>) : 应用一个 SVG 滤镜。<url> 指向 SVG 文件中定义的 <filter> 元素 ID。如 url(#my-svg-filter)。

    • 示例: filter: blur(2px) grayscale(0.5) drop-shadow(2px 2px 4px black); (先模糊，再半灰度，最后加阴影)

  2. backdrop-filter (较新，需注意浏览器兼容性，尤其是 Firefox 默认可能关闭)

    • 作用: 将图形效果应用于元素背后的区域（即透过该元素看到的内容）。元素本身需要有一定的透明度（例如，通过 background-color: rgba(...) 或 opacity) 才能看到效果。
    • 值: none (默认值) 或一个或多个滤镜函数 (filter functions) ，语法与 filter 属性完全相同。
    • 常见用途: 创建毛玻璃效果 (Frosted glass / Glassmorphism)。
    • 示例: backdrop-filter: blur(10px) saturate(180%); (对元素背后的内容应用模糊和增加饱和度)

二、 CSS 混合模式 (Blend Modes)

混合模式定义了当两个层（元素、背景层、或元素与背景）重叠时，它们的颜色应该如何相互作用。

  1. mix-blend-mode

    • 作用: 设置一个元素的内容应该如何与其父元素的内容以及该元素下方的背景进行混合。

    • 值:

      • normal: (默认值) 不混合，顶层覆盖下层。

      • 变暗 (Darken):

        • multiply: 正片叠底。结果颜色总是比两个原始颜色都暗。白色无效。
        • darken: 取两个像素中较暗的颜色。
        • color-burn: 颜色加深。加深背景色以反映混合色。

      • 变亮 (Lighten):

        • screen: 滤色。结果颜色总是比两个原始颜色都亮。黑色无效。
        • lighten: 取两个像素中较亮的颜色。
        • color-dodge: 颜色减淡。提亮背景色以反映混合色。

      • 对比 (Contrast):

        • overlay: 叠加。结合了 multiply 和 screen。暗色区域更暗，亮色区域更亮。
        • soft-light: 柔光。效果比 overlay 更柔和。
        • hard-light: 强光。结合了 multiply 和 screen 的强力版本。

      • 反相/差值 (Inversion/Difference):

        • difference: 差值。显示两个像素颜色值的差值。白色反转背景色，黑色无效。
        • exclusion: 排除。类似 difference，但对比度较低。

      • 颜色分量 (Component):

        • hue: 使用顶层的色相和底层的饱和度、亮度。
        • saturation: 使用顶层的饱和度和底层的色相、亮度。
        • color: 使用顶层的色相、饱和度和底层的亮度。保留灰度级别，常用于给黑白图片上色。
        • luminosity: 使用顶层的亮度和底层的色相、饱和度。效果与 color 相反。

    • 注意: mix-blend-mode 会创建一个新的堆叠上下文 (Stacking Context)。

    • 示例: img { mix-blend-mode: screen; } (让图片以滤色模式叠在其父元素背景或其他兄弟元素上)

  2. background-blend-mode

    • 作用: 设置元素的各个背景层（背景图片、渐变、背景颜色）之间应该如何混合。如果有多个背景层，可以提供多个混合模式值（逗号分隔），指定上层与其直接下层的混合方式。背景颜色层总是被视为最底层。

    • 值: 与 mix-blend-mode 的值相同 (normal, multiply, screen, overlay, etc.)。

    • 示例:

       .element {
  background-image: url('pattern.png'), linear-gradient(rgba(255,0,0,0.5), rgba(0,0,255,0.5));
  background-color: yellow;
  /* pattern 与 渐变 混合用 overlay, 结果再与 yellow 背景色混合用 multiply */
  background-blend-mode: overlay, multiply;
}

总结:

属性作用范围效果值 (部分列举)
filter元素本身及其内容应用模糊、颜色变化、阴影等图形效果blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), url()
backdrop-filter元素背后的区域 (需元素透明)对元素下方内容应用图形效果 (如毛玻璃)同 filter 的滤镜函数
mix-blend-mode元素内容 与 父元素内容及下方背景 的混合控制元素与其下方内容的颜色如何相互作用normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, hue, saturation, color, luminosity 等
background-blend-mode元素内部 各背景层 之间的混合控制背景图片/渐变/颜色层之间的颜色如何作用同 mix-blend-mode

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 滤镜与混合模式示例</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>

    <h1>CSS 滤镜 (Filters) 与混合模式 (Blend Modes) 演示</h1>

    <!-- 背景图片，用于 backdrop-filter 和 mix-blend-mode 示例 -->
    <div class="background-pattern"></div>

    <section class="container">
        <h2>滤镜 (<code>filter</code>) 效果</h2>
        <div class="image-grid">
            <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="原始图片">
                <figcaption>原始图片</figcaption>
            </figure>
            <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="模糊效果" class="filter-blur">
                <figcaption>模糊 (blur)</figcaption>
            </figure>
            <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="灰度效果" class="filter-grayscale">
                <figcaption>灰度 (grayscale)</figcaption>
            </figure>
            <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="褐色效果" class="filter-sepia">
                <figcaption>褐色 (sepia)</figcaption>
            </figure>
            <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="饱和度增加" class="filter-saturate">
                <figcaption>饱和度 (saturate)</figcaption>
            </figure>
             <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="色相旋转" class="filter-hue-rotate">
                <figcaption>色相旋转 (hue-rotate)</figcaption>
            </figure>
             <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="组合滤镜" class="filter-combo">
                <figcaption>组合滤镜</figcaption>
            </figure>
             <figure>
                <img src="https://picsum.photos/id/1060/200/150" alt="投影效果" class="filter-drop-shadow">
                <figcaption>投影 (drop-shadow)</figcaption>
            </figure>
        </div>
    </section>

    <section class="container relative-container">
        <h2>背景滤镜 (<code>backdrop-filter</code>) - 毛玻璃效果</h2>
        <div class="frosted-glass">
            <h3>毛玻璃效果区域</h3>
            <p>这个区域应用了 `backdrop-filter: blur()`，可以看到背景图片变得模糊了。</p>
        </div>
        <p style="margin-top: 20px;">(需要浏览器支持 backdrop-filter)</p>
    </section>

    <section class="container relative-container">
        <h2>元素混合模式 (<code>mix-blend-mode</code>)</h2>
        <div class="blend-element multiply">
            Multiply (正片叠底)
        </div>
         <div class="blend-element screen">
            Screen (滤色)
        </div>
         <div class="blend-element overlay">
            Overlay (叠加)
        </div>
        <div class="blend-element difference">
            Difference (差值)
        </div>
         <p style="clear: both; padding-top: 10px;">这些色块与下方的背景图片进行混合。</p>
    </section>

    <section class="container">
        <h2>背景混合模式 (<code>background-blend-mode</code>)</h2>
        <div class="background-blend-box blend-multiply">
            <p>背景图片与背景色 (黄色) <br> Multiply 混合</p>
        </div>
         <div class="background-blend-box blend-screen">
             <p>背景图片与背景色 (蓝色) <br> Screen 混合</p>
        </div>
         <div class="background-blend-box blend-overlay-gradient">
             <p>背景图片与渐变背景 <br> Overlay 混合</p>
        </div>
    </section>

</body>
</html>

body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0; /* 浅灰色背景 */
}

h1, h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}
h2 { margin-top: 40px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }

.container {
    background-color: rgba(255, 255, 255, 0.8); /* 轻微透明的白色背景 */
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.relative-container {
    position: relative; /* 为绝对定位或混合模式提供上下文 */
    z-index: 1; /* 确保容器在背景之上 */
}

/* 用于 backdrop-filter 和 mix-blend-mode 的背景 */
.background-pattern {
    position: fixed; /* 固定背景 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://picsum.photos/id/1080/1920/1080'); /* 使用一张色彩丰富的背景图 */
    background-size: cover;
    background-position: center;
    z-index: 0; /* 在最底层 */
    opacity: 0.9; /* 背景稍微降低不透明度 */
}

/* --- 滤镜 (filter) 示例 --- */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 响应式网格 */
    gap: 20px;
    text-align: center;
}
.image-grid figure {
    margin: 0;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
}
.image-grid img {
    max-width: 100%;
    height: auto;
    display: block; /* 移除图片下方空隙 */
    margin-bottom: 10px;
}
.image-grid figcaption {
    font-size: 0.9em;
    color: #555;
}

.filter-blur { filter: blur(3px); }
.filter-grayscale { filter: grayscale(100%); }
.filter-sepia { filter: sepia(80%); }
.filter-saturate { filter: saturate(200%); }
.filter-hue-rotate { filter: hue-rotate(120deg); }
.filter-combo { filter: contrast(150%) brightness(1.1) saturate(150%); }
.filter-drop-shadow { filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6)); }

/* --- 背景滤镜 (backdrop-filter) 示例 --- */
.frosted-glass {
    width: 80%;
    max-width: 500px;
    margin: 20px auto;
    padding: 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.3); /* 关键：需要半透明背景 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );

    /* 核心：应用背景滤镜 */
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%); /* 兼容 Webkit */

    text-align: center;
    color: #333; /* 深色文字以便在模糊背景上可见 */
}
.frosted-glass h3 { color: #111; }

/* --- 元素混合模式 (mix-blend-mode) 示例 --- */
.blend-element {
    width: 120px;
    height: 120px;
    float: left; /* 让元素并排 */
    margin: 15px;
    border-radius: 50%; /* 圆形 */
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9em;
}
.multiply {
    background-color: cyan;
    mix-blend-mode: multiply;
}
.screen {
    background-color: magenta;
    mix-blend-mode: screen;
}
.overlay {
    background-color: yellow;
    mix-blend-mode: overlay;
    color: black; /* Overlay 在黄色上文字用黑色 */
}
.difference {
    background-color: white;
    mix-blend-mode: difference;
    color: black; /* Difference 在白色上文字用黑色 */
}

/* --- 背景混合模式 (background-blend-mode) 示例 --- */
.background-blend-box {
    width: 45%;
    min-width: 200px;
    height: 180px;
    float: left;
    margin: 10px 2.5%;
    border: 2px solid black;
    border-radius: 5px;
    background-image: url('https://picsum.photos/id/10/300/200'); /* 使用纹理或图案背景 */
    background-size: cover;
    background-position: center;

    /* 用于显示文字 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
.blend-multiply {
    background-color: gold;
    background-blend-mode: multiply;
}
.blend-screen {
    background-color: dodgerblue;
    background-blend-mode: screen;
}
.blend-overlay-gradient {
    /* 叠加图片和渐变 */
    background-image: url('https://picsum.photos/id/10/300/200'), linear-gradient(to bottom right, purple, orange);
    /* 让图片和渐变混合 */
    background-blend-mode: overlay;
}
avatar
文章
阅读
粉丝