background-blend-mode:CSS实现混合模式叠加——类似Ps图片滤镜效果
七娃博客243 次
css也可以实现图片混合模式滤镜效果,这也是前端实现照片滤镜的原理和方法,在网页ps的滤镜叠加也是用的css滤镜叠加的方法。
滤镜css:
.bbm-screen{background-blend-mode: screen;/*滤色模式*/} .bbm-multiply{background-blend-mode: multiply;/*正片叠底模式*/} .bbm-overlay{background-blend-mode: overlay;/*叠加模式*/} .bbm-darken{background-blend-mode: darken;/*变暗模式*/} .bbm-lighten{background-blend-mode: lighten;/*变亮模式*/} .bbm-colord{background-blend-mode: color-dodge;/*颜色减淡模式*/} .bbm-saturation{background-blend-mode: saturation;/*饱和度模式*/} .bbm-color{background-blend-mode: color;/*颜色模式*/} .bbm-luminosity{background-blend-mode: luminosity;/*亮度模式*/} .bbm-colorb{background-blend-mode: color-burn;/*颜色加深模式*/} .bbm-hue{background-blend-mode: hue;/*色相模式*/} .bbm-hlight{background-blend-mode: hard-light;/*强光模式*/} .bbm-slight{background-blend-mode: soft-light;/*柔光模式*/} .bbm-difference{background-blend-mode: difference;/*差值模式*/} .bbm-exclusion{background-blend-mode: exclusion;/*排除模式*/}
图片css:
.one{width: 150px;height: 150px;float: left;background: url(../img/01.jpg) no-repeat;background-position: center;background-size: cover;background-color: blue;}
我们看一下效果:
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
评论 | 0 条评论