css 背景混合模式

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 背景混合模式相关的知识，希望对你有一定的参考价值。

.bg-blend {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

background-blend-mode: multiply;
background-blend-mode: screen; 
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;

以上是关于css 背景混合模式的主要内容，如果未能解决你的问题，请参考以下文章

神奇的 CSS，让文字智能适配背景颜色

CSS3混合模式mix-blend-mode/background-blend-mode简介