CSS也可以处理图片效果了哟

最新推荐文章于 2025-07-12 09:37:59 发布

原创最新推荐文章于 2025-07-12 09:37:59 发布 · 7.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文介绍如何使用CSS滤镜和混合模式处理图像效果，包括改变图像色值、亮度、饱和度等，并通过具体示例展示了mix-blend-mode和background-blend-mode的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在大家的印象中，处理图像效果这都是UI的工作，一想起图像处理想到的就是photoshop（妹子们脑海中闪过的肯定是美颜相机，连我自己写到这的时候都脑海中都小闪了一下呢(๑¯ิε ¯ิ๑) ）之类的软件来完成，呐随着CSS技术的发展浏览器的更新，前端工作人员也能做一些图像处理了哟ψ(｀∇´)ψ~

那么，在这个月黑风高的夜里，本帅小姐姐就跟大家聊聊如何用css来处理图像效果。

处理图像效果分很多种：

改变图像大小：使用CSS的width和height或者使用CSS的transform中的scale
改变图像形状：使用CSS的transform中的skew
改变图像位置：使用CSS的position或者transform中的rotate、translate
裁剪图像：使用CSS的clip（现在该属性已被clip-path取代）
改变图像透明度：使用CSS的opacity

恩，大家看完上面那几个transform属性的时候是不是想，这算哪门子处理图像效果，爸爸刚接触C3的时候就知道（用过）这玩应了好嘛，打住！大家不要误会，还没有进入正题，下面看看我能不能掺杂着用本命颜文字的代码来征服泥萌

这里写图片描述（真·本尊）

我们玩过PS的都知道，有一个处理图像产生不同颜色效果的功能，里面有什么过滤啦，五十度灰啦（并不是⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄），反色啦之类的效果，这种功能是处理图像效果的利器，我们称之为叠加模式，那么问题来了，在web中如何使用css属性来实现类似效果呢？
另外，这里不会阐述如何使用这些属性，如果你从未接触过这方面内容，建议小碎步走向下面这两扇蓝色的门：

CSS Fliter的是种特效

高级CSS filters

༼´´◓ɷ◔`༽ ，

当然没事没有的，因为我还没写啊哈哈哈哈哈哈，明天白天写吧。
CSS滤镜

CSS提供了一种滤镜特性，这种特性能帮助我们处理图像效果，比如：改变图像色值、亮度、饱和度….

ヾ(　　)ノ゛天ヾ(　°д)ノ゛旋ヾ(°д°)ノ゛地ヾ(д°　)ノ゛转ヾ(　　)
那么，谜题揭晓~~~~
ヾ(　　)ノ゛天ヾ(　°д)ノ゛旋ヾ(°д°)ノ゛地ヾ(д°　)ノ゛转ヾ(　　)

CSS滤镜规范中的filter属性，就可以实现各种不同效果啦，当然除了filter之外，还有一个backdrop-filter属性，成为高级滤镜。使用它可以处理更多图像效果，比如阿大家在IOS设备看见的毛玻璃效果（我就不上图눈_눈）

CSS混合模式

在CSSzhong ,除了使用滤镜效果可以帮助我们处理图像之外，还有一个类似于PS的图层混合模式特性，称之为CSS混合模式。

CSS混合模式，提供了:

background-blend-mode （背景元素图片）

mix-blend-mode（类似于filter用于img元素上）

isolation（隔离元素）

三个属性

CSS怎么处理图像效果呢（到重点了吗:(´ཀ`」 ∠)….）

图片素材：

这里写图片描述

啊~(❁´▽`❁)好喜欢白发小姐姐~~~（图片来自微博）

mix-blend-mode

那mix, 恩，可能是该属性不仅可以作用于HTML，还可以作用于SVG，干脆叫mix一起捋过来。该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。

兼容性：

这里写图片描述

可见，最近的Chrome以及FireFox浏览器都已经支持良好，而且无需使用私有前缀。
其支持的值很多，中英文对照如下：

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原

下面简单看几个小例旬：

HTML结构：

<div class="olala">
    <img src="zero/69b5364djw1ejziho8h7vj20ox15otlj.jpg" alt="">
</div>

CSS部分

.olala{
    background-image:url(zero/69b5364djw1ejyid1nz20j20rt15ok5m.jpg);
    background-size:cover;
    background-position:center;
}
.olala img {
    mix-blend-mode: multiply;
}

图像效果：
这里写图片描述

.olala{
    background-image:url(zero/69b5364djw1ejyid1nz20j20rt15ok5m.jpg);
    background-size:cover;
    background-position:center;
}
.olala img {
    mix-blend-mode: hue;
}

这里写图片描述

大家慢慢试，下一个：

background-blend-mode

这个要更好理解一点，背景的混合模式。

可以是背景图片间的混合，也可以是背景图片和背景色的混合。

兼容性同上
因为代码比较少，我就整段粘了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .olala{
            width:100%;
            height:400px;
            background: url(zero/1.jpg) no-repeat center, url(zero/2.jpg) no-repeat center;
            background-blend-mode: color-dodge; 
        }
    </style>
</head>
<body>
    <div class="olala"></div>
</body>
</html>

效果：
这里写图片描述

filter

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .olala img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%)
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
        }
    </style>
</head>
<body>
    <div class="olala">
        <img src="zero/69b5364djw1ejziho8h7vj20ox15otlj.jpg" alt="">
    </div>
</body>
</html>