HTML与Css小技巧(1)

前言

俗话说能用css解决的问题千万别用js，这里主要就给各位大佬介绍下不常用的或者说是新奇的css小技巧。

css 混合模式

熟悉PS的人应该都知道混合模式，实际上在canvas和svg中也有涉及，而在css中混合模式被称为mix-blend-mode，属性如下：

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

额，具体的什么效果我就不说了，程序员当然都是直接上代码啊！