做有态度的前端团队

网易FEG前端团队

浅谈css3的混合模式

作者: 小梦子日期: 2016-10-31

225987

在photoshop中，我们处理图片，在图层之间有混合模式，点击混合模式里面的选项，可以使图片实现不同的效果，这个混合模式在css3中也有实现！下面就来介绍一下css3的混合模式。css3的混合模式主要使用mix-blend-mode这个属性来实现的。当然，也可以用background-blend-mode。下面我就来介绍一下这2个属性吧！

mix-blend-mode

这个用法很简单，就是在你需要混合的div上面添加这个属性就可以了，例如如下：

1	`mix-blend-mode: multiply;`

multiply，这个就是我们ps中的正片叠底！

类似的属性我列举一下！如下：

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;           //复原

mix-blend-mode默认情况下是会混合所有比起层叠顺序低的元素的，如果我们希望值混合某一两个元素，而不是全部，该怎么办呢？

isolation:isolate

我们可以使用isolation属性将文字和它的包裹元素隔离起来，使它们不和背景图片进行混合，这样，文字就不会和背景混合了！

.haorooms {
    isolation: isolate;
} 

background-blend-mode

这个更好理解一点，background-blend-mode，里面有个background，意思是背景的混合模式。可以是背景图片之间的混合，也可以是背景图片和背景色的混合！具体参数和mix-blend-mode一样！

1	`background-blend-mode:darken`

变暗！记住：这个是背景图片之间或者背景图片和背景色的混合的混合啊！

手机阅读请扫描下方二维码：

none

上一篇：Why We Chose Vue.js 下一篇：移动分页实现

已有 71 条评论

admin

2020-10-23 09:53:15

12345678

回复
1. 1
  
  2023-09-11 18:55:38
  
  1
  
  回复
  1. 1
    
    2023-09-11 23:58:11
    
    555
    
    回复
    
    1
    
    2024-07-15 20:35:18
    
    1
    
    回复
  2. 1
    
    2023-09-14 22:03:44
    
    555
    
    回复
  3. 1
    
    2023-09-15 21:05:21
    
    555
    
    回复
  4. 1
    
    2023-10-05 08:56:17
    
    1
    
    回复
2. 1
  
  2023-09-14 21:13:58
  
  1
  
  回复
3. 1
  
  2023-09-15 20:16:10
  
  1
  
  回复
4. 1
  
  2023-09-23 03:55:23
  
  1
  
  回复
5. 1
  
  2023-10-05 08:55:00
  
  1
  
  回复
6. 1
  
  2024-03-13 10:47:01
  
  1
  
  回复
7. 1
  
  2024-07-02 15:37:11
  
  1
  
  回复
8. 1
  
  2024-07-02 17:28:04
  
  1
  
  回复
9. 1
  
  2024-07-02 17:29:04
  
  1
  
  回复
10. 1
  
  2024-07-02 17:29:04
  
  1
  
  回复
11. 1
  
  2024-07-15 20:33:11
  
  1
  
  回复
12. 1
  
  2024-07-15 20:34:11
  
  1
  
  回复
13. 1
  
  2025-03-12 11:51:51
  
  1
  
  回复
admin|expr 902882768 + 898673608

2020-10-23 09:56:44

12345678

回复
1. 1
  
  2023-03-21 04:28:03
  
  555
  
  回复
2. 1
  
  2023-03-24 14:30:36
  
  555
  
  回复
3. 1
  
  2023-09-11 19:33:21
  
  555
  
  回复
admin

2020-10-23 09:56:44

wjlrctqcmxgbplfgoorc

回复
admin&set /A 910250339+996546304

2020-10-23 09:56:44

12345678

回复
wjlrctqcmxgbplfgoorc

2020-10-23 09:56:44

12345678

回复
admin%0d%0aCRLF-Header:CRLF-Value

2020-10-23 09:56:44

12345678

回复
admin

2020-10-23 09:56:44

12345678

回复
/*1*/{{948368714+976785348}}

2020-10-23 09:56:44

12345678

回复
${876533988+910007781}

2020-10-23 09:56:44

12345678

回复
admin

2020-10-23 10:00:31

12345678

回复
1. 1
  
  2023-01-25 13:10:28
  
  1
  
  回复
1

2023-01-25 13:08:24

1

回复
1. 1
  
  2023-02-28 04:07:27
  
  1
  
  回复
2. 1
  
  2023-02-28 04:07:27
  
  1
  
  回复
3. 1
  
  2023-02-28 04:07:27
  
  1
  
  回复
4. 1
  
  2023-02-28 04:07:27
  
  1
  
  回复
5. 1
  
  2023-02-28 04:07:27
  
  1
  
  回复
1

2023-02-28 04:04:33

1

回复
1

2023-02-28 04:04:33

1

回复
1

2023-03-18 08:15:57

1

回复
1

2023-03-21 00:28:20

1

回复
1

2023-03-21 03:30:13

555

回复
1

2023-03-24 13:45:36

1

回复
1

2023-03-24 14:36:10

555

回复
1

2023-03-26 12:49:27

1

回复
1

2023-04-01 02:27:57

1

回复
1

2023-04-03 09:35:00

1

回复
1

2023-04-04 21:35:51

1

回复
1

2023-06-23 07:06:09

1

回复
1

2023-09-11 17:52:51

1

回复
1

2023-09-11 20:03:04

555

回复
1

2023-09-11 23:50:45

1

回复
1

2023-09-14 19:53:03

1

回复
1

2023-09-14 23:12:56

555

回复
1

2023-09-15 18:43:28

1

回复
1

2023-09-15 22:17:32

555

回复
1

2023-09-16 03:34:26

1

回复
1

2023-09-23 02:27:59

1

回复
1

2023-09-23 10:07:53

1

回复
1

2023-10-05 06:16:38

1

回复
1

2024-03-13 08:52:13

1

回复
1

2024-07-02 15:36:11

1

回复
1

2024-07-15 18:53:24

1

回复
1

2024-07-16 03:48:06

1

回复
1

2024-07-16 03:48:06

1

回复
1

2024-08-28 05:38:50

1

回复
1

2024-08-28 05:39:54

1

回复
1

2024-08-28 05:40:55

1

回复
1

2025-03-12 11:00:53

1

回复
1

2025-03-13 00:25:35

1

回复

取消回复