CSS如何实现图片黑白渐变过渡？filter滤镜组合技巧-css教程-PHP中文网

CSS如何实现图片黑白渐变过渡？filter滤镜组合技巧

看不見的法師

发布： 2025-08-23 15:20:02

原创

1002人浏览过

答案：CSS中无法直接用filter: grayscale()实现渐变，因其作用于整个元素；需借助mask-image或伪元素与混合模式创建渐变蒙版，通过层叠控制局部显色，实现黑白与彩色的平滑过渡。

css如何实现图片黑白渐变过渡？filter滤镜组合技巧

在CSS中实现图片黑白渐变过渡，核心思路并非直接通过

filter: grayscale()

登录后复制

本身来生成渐变，因为

filter

登录后复制

属性是应用于整个元素的，无法在空间上产生过渡效果。真正的技巧在于结合其他CSS属性，如

mask-image

登录后复制

或伪元素与混合模式，来创造一个透明度或颜色上的“渐变区域”，从而让底层的黑白图片或彩色图片以渐变的形式显现出来。简单来说，我们通常会有一层黑白图像，再通过一个渐变蒙版或叠加层来控制彩色图像的显示范围，从而形成视觉上的黑白渐变过渡。

/* 解决方案示例：使用 mask-image 实现黑白渐变过渡 */
.image-container {
    position: relative;
    width: 100%; /* 或具体尺寸 */
    height: 300px; /* 或具体尺寸 */
    overflow: hidden; /* 确保内容不溢出 */
}

.image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例填充 */
    /* 默认显示为黑白 */
    filter: grayscale(100%);
    /* 为了演示，可以添加一个过渡效果 */
    transition: filter 0.5s ease-out;
}

.image-container .color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('your-image-url.jpg'); /* 再次加载原始彩色图片 */
    background-size: cover;
    background-position: center;
    /* 关键：使用线性渐变作为蒙版 */
    -webkit-mask-image: linear-gradient(to right, transparent, black 50%, transparent); /* 从左到右，中间彩色，两边黑白 */
    mask-image: linear-gradient(to right, transparent, black 50%, transparent);

    /* 也可以尝试不同的渐变方向和颜色停止点 */
    /* 比如：从上到下，上半部分彩色，下半部分黑白 */
    /* -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent); */
    /* mask-image: linear-gradient(to bottom, black 50%, transparent); */
}

/* HTML 结构 */
/*
<div class="image-container">
    <img src="your-image-url.jpg" alt="Description">
    <div class="color-overlay"></div>
</div>
*/

登录后复制

为什么常规的

filter: grayscale()

登录后复制

无法直接实现渐变？

初学者或者刚接触CSS滤镜的朋友，可能直觉上会想，既然有

grayscale()

登录后复制

，那是不是可以给它一个渐变值，比如从

grayscale(0%)

登录后复制

到

grayscale(100%)

登录后复制

？很遗憾，CSS的

filter

登录后复制

属性并非设计来处理这种空间上的渐变。

filter

登录后复制

本质上是一个后处理效果器，它将一个统一的视觉调整应用到整个元素上。当你设置

filter: grayscale(100%)

登录后复制

时，整个图片会立刻、均匀地变为黑白。它不会像

linear-gradient

登录后复制

那样，在元素的某个轴向上根据颜色停止点创建平滑的过渡区域。

filter

登录后复制

的作用更像是Photoshop里给整个图层加一个“去色”滤镜，它作用于像素的颜色值，而不是像素的位置。因此，如果我们需要图片的一部分是彩色，一部分是黑白，并且中间有一个平滑的过渡区域，仅仅依靠

filter: grayscale()

登录后复制

是无法完成的。我们需要引入额外的层级或者更高级的遮罩技术来“选择性地”应用这种效果。

结合

mask-image

登录后复制

实现图片局部彩色与黑白过渡的原理

要实现图片局部彩色与黑白渐变过渡，

mask-image

登录后复制

是一个非常优雅且强大的解决方案。它的核心原理是利用一个图像（通常是渐变）的透明度或亮度信息来“遮罩”或“裁剪”另一个元素的内容。想象一下，你有一张原始的彩色图片，然后你再准备一张这张图片的黑白版本。我们要做的是，用一个渐变来控制彩色图片在黑白图片上方的显示区域。

立即学习“前端免费学习笔记（深入）”；

具体来说，我们通常会这样做：

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

底层图像（黑白）：首先，让我们的原始图片通过
```
filter: grayscale(100%)
```
登录后复制
完全变为黑白，作为背景层。
上层图像（彩色）：然后，再放置一个与底层图片完全重叠的元素（比如一个
```
div
```
登录后复制
或者伪元素），它的背景是原始的彩色图片。
应用蒙版：将一个
```
linear-gradient
```
登录后复制
作为
```
mask-image
```
登录后复制
应用到这个上层的彩色图片元素上。
```
linear-gradient
```
登录后复制
会生成一个从透明到不透明（或从黑到白，取决于蒙版模式）的渐变。
```
mask-image
```
登录后复制
会根据这个渐变的透明度或亮度来决定上层彩色图片的哪些部分是可见的，哪些是不可见的。

例如，一个从

transparent

登录后复制

到

black

登录后复制

的线性渐变，会使得蒙版从完全透明（隐藏内容）过渡到完全不透明（显示内容）。当这个蒙版应用到彩色图片层时，它就会“揭示”出彩色图片的一部分，而未被揭示的部分则会透过它看到下面的黑白图片。这样，我们就实现了从黑白到彩色的渐变过渡效果。这种方法巧妙地利用了层叠和透明度原理，而非直接修改图片像素的滤镜值。

深入探索：利用伪元素和混合模式实现更复杂的视觉效果

除了

mask-image

登录后复制

，我们还可以利用伪元素（

::before

登录后复制

或

::after

登录后复制

）和CSS混合模式（

mix-blend-mode

登录后复制

）来实现一些有趣且复杂的黑白或色彩渐变效果。这种方法的思路是，我们不直接改变图片的灰度，而是通过在图片上方叠加一个带有渐变的伪元素，然后利用混合模式让这个渐变与图片内容进行像素级的运算，从而达到类似黑白或色彩过渡的视觉效果。

举个例子，假设我们想让图片从左到右逐渐变得更“去色”：

基础图片：保持原始彩色图片不变。
创建伪元素：在图片容器内创建一个
```
::before
```
登录后复制
或
```
::after
```
登录后复制
伪元素，使其完全覆盖图片。
伪元素背景：给这个伪元素一个从左到右的
```
linear-gradient
```
登录后复制
背景，比如从
```
rgba(0,0,0,0)
```
登录后复制
到
```
rgba(0,0,0,1)
```
登录后复制
（从透明到黑色）。
混合模式：最关键的一步是给这个伪元素设置
```
mix-blend-mode
```
登录后复制
属性。
- 如果设置为
```
luminosity
```
  登录后复制
  （亮度），它会保留底层图片的色相和饱和度，但亮度会由伪元素的亮度决定。当伪元素是黑色渐变时，它能有效地将图片推向去色。
- 如果设置为
```
color
```
  登录后复制
  ，它会保留底层图片的亮度和透明度，但色相和饱和度由伪元素决定。
- 其他模式如
```
overlay
```
  登录后复制
  、
```
soft-light
```
  登录后复制
  等也能产生不同的叠加效果。

这种方法的好处在于，它提供了更大的灵活性来控制色彩的衰减或增强，不仅仅局限于简单的黑白。通过调整渐变的颜色、透明度和混合模式，我们可以创造出非常独特的艺术效果，比如局部褪色、局部色彩强化，甚至模拟老照片的色彩偏移等。虽然它不直接是

filter: grayscale()

登录后复制

的渐变形式，但它通过“组合技巧”实现了类似的视觉目的，并且提供了更丰富的表现力。

/* 伪元素与混合模式实现示例 */
.blend-effect-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.blend-effect-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blend-effect-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 渐变从透明黑色到纯黑色 */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    /* 混合模式：luminosity 会让图片的亮度由伪元素决定，从而达到去色效果 */
    mix-blend-mode: luminosity;
    pointer-events: none; /* 确保不影响鼠标事件 */
}

/* HTML 结构 */
/*
<div class="blend-effect-container">
    <img src="your-image-url.jpg" alt="Description">
</div>
*/

登录后复制

以上就是CSS如何实现图片黑白渐变过渡？filter滤镜组合技巧的详细内容，更多请关注php中文网其它相关文章！