CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果

一、CSS3 mix-blend-mode

首先，要知道”blend-mode”就是混合模式的意思。那mix, 恩，我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML，还可以作用于SVG，干脆叫mix一起捋过来。该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”。

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

二、CSS3 background-blend-mode

background-blend-mode这个要更好理解一点，背景的混合模式。可以是背景图片见的混合，也可以是背景图片和背景色的混合。

转载于:https://www.cnblogs.com/binmengxue/p/5788664.html

CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果相关推荐

CSS3混合模式mix-blend-mode/background-blend-mode简介
一.关于混合模式熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式,本质上都是一样的. 下面是一些常见的混合模式的算法: 维基上也有说明.有兴趣可以了解下. 本文内容则简单介绍C ...
php开源混合模式吗,CSS3混合模式使用详解
这次给大家带来CSS3混合模式使用详解,使用CSS3混合模式的注意事项有哪些,下面就是实战案例,一起来看一下. 一.关于混合模式熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式 ...
css3 混合,css3混合模式
移动端/H5关于cursor:pointer导致的问题 cursor属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边 ...
css中background属性引入图片url()中地址
网络图片: background: url(https://58d.oss-cn-hangzhou.aliyuncs.com/website2022/shoes.png); 本地图片: 1.项目内部: ...
Ps 中必须知道的四大混合模式
在 Ps 中有多达六组 27 种混合模式,不仅可应用于图层之间,在画笔等工具.图层样式等里面也都有,几乎可以说是无处不在. 有关混合模式的原理及说明,请参阅<Ps 混合模式(合集)>. 在 ...
CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
OpenGL（十七）Photoshop blend算法与图层混合模式
使用混合模式可以制作丰富多彩的效果.而OpenGL中可以轻松开启这种模式,但更关键的是图形算法.本文参照 Photoshop blend算法 ,介绍如何通过shader,在OpenGL中实现混合效果. ...
Shader 中的颜色混合模式（Blend Mode）
在之前的文章中提及了 Shader 中的颜色计算,介绍了一些基本的颜色混合计算,然而在实际的 Shader 滤镜中,简单到加减乘除并不能很好地还原出我们想要的效果,mix()也只是其中一个选择. 回顾 ...
unity ShaderLab 基础之【像素混合Blend】Blend命令详解 shaderLab blend blendOp透明度颜色混合
一基础介绍 1颜色相关在unity中,颜色分为RGB255,RGB1,HSV.这几种格式的值不同,但效果都一样. [RGB 0-255]: 形式一般为(R,G,B,A),取值范围为0-255. r ...

CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果

一、CSS3 mix-blend-mode

二、CSS3 background-blend-mode

CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果相关推荐

最新文章

热门文章

CSS3混合模式mix-blend-mode/background-blend-mode简介 ，PS中叠加效果

一、CSS3 mix-blend-mode

二、CSS3 background-blend-mode

CSS3混合模式mix-blend-mode/background-blend-mode简介 ，PS中叠加效果相关推荐

最新文章

热门文章

CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果

CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果相关推荐