css换装修改局部颜色

咱们来看一下一个非好玩的效果啊，是给这个换装的效果，你可以调整这里的颜色，调整之后呢，它就会应用到这个图片的相应区域，叭方说调成一个蓝色啊，你看一下啊，衣服也是可以调整的啊，可以切换这个颜色好，那么这个换装效果如何来做呢？其实它的原理呢，其实并不复杂，咱们以裙子为例啊，来做这么一个效果，以裙子能做，一切都能做了啊，都是一样的道理

呃，首先呢，你要准备好两张图片，第一张呢是全身的图片啊，这个全身的图片里边呢，有一个要求，就是它要换装的那个部分，比方说裙子要换装是吧，那么换装的那个部分一定要是白色，为什么呢？以后我解释原因啊，

这是第一张图片，那么这个设计师呢，会给你第二张图片呢，就是你要换装的那个部分的图片

能看清楚吗？这是一张大图啊，这个图片的尺寸呢，要跟原图保持一致，其他的地方全部透明，但是要换装的那个部分，比方说裙子诶，要弄一个不透明的出来，用黑色也可以，用别的颜色也可以啊，反正要不透明好，只需要这两张图片就可以完成换装。那具体来说怎么来做呢？首先你在页面上呢，我这里呢，就直接使用那个图片啊，就是原图整张图片，然后稍微用一下CSS控制一下啊，设置一下宽高啊，尺寸啊，乱七八糟的。

  把设置一下就完事了，看一下吧，目前呢，就是一个规规矩矩的图片，然后接下来第二步，你不是要换装吗？那你要把那个裙子那个图片给它盖上去，那我们来试一试啊，我这里呢就加一个div，然它取个的样式叫做skirt写对没有啊，应该是没问题的啊，然后呢，找到这个样式要给它盖上去，那是不是得把它变成绝对定位啊，对吧，要盖上去，然后父元素呢，得相对定位

然后呢，宽高跟负元素相同啊，inset:0，所inset:0呢，就表示说LEFT0 top0 right0 就是一个缩写，然后呢，就给它设置背景图了，背景图呢是啥呀？就是我们刚才看到那个要换装的那个裙子好保存，裙子盖到这儿来了，那接下来就神奇了

我现在不是想做一个红色的裙子嘛，红色我们有了，现在我们缺的是啥？缺的是这个裙子的形状，我们现在要做的事情是在这个红色的元素上挖一个裙子出来，其他的地方不要了，我就要这个裙子的这部分，那能不能做呢？可以做，怎么做呢？使用蒙版MASk好，这个mask怎么来定义，就把刚才那个背景图给它定义过去保存，然后呢，加上一个兼容性的属性啊，

我要解释一下这是怎么回事，之前呢，我们写了一个元素全部是红色是吧？然后呢，我们又在里边设置了一个mask，这个mask呢是一个蒙层啊，它是一张图片，它只有这个这个部分是有颜色的，这里边是有颜色的，其他地方呢全是透明，那么这个mask到底是啥意思呢？它表示说你当前这个元素使用这个蒙层的透明通道啥意思？当前这个元素本来这些地方是不是全是红色对吧，透不透明不透明啊，但是这个蒙板里边这是个当图片，这个蒙板图片这些地方是不是全是透明的，那么一旦你把这个蒙版的图片应用进来过后，像这些像素点他们的透明度全部沿用这个蒙版图片的透明度，也就意味着这些点的红色全部变透明了，为啥呢？因为这个蒙版图片这些地方是透明的，而这些点呢，元素里边是红色的点，对吧？这些点他们同样是沿用这个蒙版图片的透明度，蒙版图片这些点是不是黑色，其实不管它啥颜色，关键是它不透明，那么同样的这些红色的点它也会变得不透明，这就是为什么只有这些地方看到是红色，其他地方呢，看不到了，但是其他地方在不在在只是呢，它变透明了，懂这意思吧，这就是蒙版，好，当然写到这儿呢，你会看到这个结果呢，并不是我们想要的，我们想要的是啥呀？是这个它有褶皱的是吧，你看给它整个红色，你看这个多好看对吧，有棱有角的，他说我们这个玩意儿呢，就是死气沉沉的一个红色，接下来我们来实现这个褶皱，褶皱咋实现呢？

一行代码啊，首先把这里优化一下吧，这个值呢，用了两次是吧，我们可以把它使用成一个变量，然后下边呢，就使用这个变量就可以了，好效果是一样的啊对，它是一样的，然后要实现褶皱加一行代码就是mix-blend-mode啊，是属为multiple好保存看一下啊，这个效果就出来了，诶这是什么回事呢？

首先要解释一下这个属性啊，这叫混合模式，什么东西在混合颜色，在混合哪些颜色，在混合当前元素的颜色和这个元素背后的颜色再进行混合，这个元素背后是啥颜色，我把它删了，你看一下吧，背后不就是一张图片对吧？那么在这个裙子的区域里。边不就是白色吗？对吧？那么也就意味着啥呢？现在这个红色区域，这跟它背后的这个白色区域，它的颜色在进行混合，这个混合是怎么混合的，是一个像素点，一个像素点混合的，比方说我现在鼠标点的这个点，这个像素点是不是有两个颜色，一个是红色，一个是背后的那个白色，对吧？那么这两个颜色来进行混合，来得到这个像素点最新的颜色，因此呢，这一块混合啊，其实就是一个函数给我两个颜色，然后呢，我经过计算得到这个像素点最新的颜色，这就是混合，所以说混合的本质呢，是一套算法，输入两个颜色，输出一个新的颜色，通过这个算法呢，就可以把这个区域的每一个像素点的颜色确定下来，因为每一个像素点是不是有当前元素的颜色和背后的颜色，对吧？那么后面写这个multiple是啥意思呢？它就表示这个算法本身，因为这种计算的话方式有很多呀，你给我两个颜色，我把它相加，可不可以求平均值可不可以对吧？所以说它的算法有很多，这就是不同的混合模式，你看一下这个混合里边呢，它有很多种模式，我这里取得模式呢，是叫做multiple，翻译过来呢，叫做正片叠加，什么叫做正片叠加呢？它的做法非常简单，就是把两个颜色乘起来，颜色是不是数字，你不要告诉我颜色不是数字啊，当然是数字RGB嘛，然后。乘起来过后除一个255，就这么简单，举个例子啊，比方说我这里第一个颜色呢，是RTB x1x2X3，然后第二个颜色的RTB是Y1 Y2Y3，得到了新的颜色是啥？X1乘Y1除以255，X2乘Y2除以255，X3乘Y3除255，这就是新的颜色，那这种正片叠加的话，它会有这么一个特点，看着啊，特别有意思的来了，如果说其中一个颜色是白色的话，那你想一想，这一叠加出来，这个地方是不是就变成原本的颜色了，因此呢，正片叠加跟白色叠加的时候，它一定是原本的颜色，所以呢，你看最终叠加出来的效果啊，红色的地方是不是仍然保持红色，因为它背后是白色，对吧？任何颜色跟白色进行正片叠加，它一定是那个颜色本身，所以呢红色不受影响，然后呢，我们再看另外一个情况，就是如果说正片叠加的时候，另一个颜色是黑色的话，那么叠加出来是不是一定是黑色，对吧？这两个相乘那肯定等于零啊，所以这就解释了为什么这样子做了过后它会有个褶皱，为什么呢？是因为原本的图片里边，你看这些地方是不是在偏黑，有褶皱的地方是不是在偏黑，偏黑的话，那么我用我那个红色跟那个偏黑的颜色一进行叠加，是不是我的红。红色也会偏暗，这个效果就出来了，这就是为什么要求这个原图呢，一定是白色的衣服和裤子啊，就这么一个小效果啊，就是首先原理呢，并不复杂，轻松的就可以做出来。