谈谈css3的混合模式

2997次浏览

前言

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

mix-blend-mode

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

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一样!这里就不一一列举了!

background-blend-mode:darken

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

demo演示

为了让大家更加直观,我简单的写了一个demo,比较丑,大家将就着看吧!

假如在此页面中不好操作,大家可以新窗口打开demo,新窗口地址:http://resource.haorooms.com/uploads/demo/new/css3_mix/text.html

第一个案例是mix-blend-mode应用,

第二个案例是mix-blend-mode结合isolation:isolate的使用,大家可以对比一下!注意用的是文字啊!

第三个案例则是background-blend-mode的演示!

大家可以在案例下面选择框里面选择各个属性,进行测试!

我把这个案例上传到haorooms前端资源库了!有需要下载案例的同学,可以去资源库下载!

案例下载地址:http://resource.haorooms.com/softshow-37-254-1.html

Tags: css3混合模式css

相关文章: