css实现图片叠加的几种思路（记录笔记）

背景：实现点击事件，触发原图的img透明度降低，成为透明背景，并且加一个不透明的原图。可以用于加水印，一个div覆盖几个样式

使用的是vue，vue-cli搭建项目，几种思路：

1、切换背景样式。设置一个key，当div元素触发点击事件（

）时，key的值从false变成true，修改底图的透明度background-color:rgba(颜色，颜色，颜色，透明度)，或者修改background-color:transparent;

底图作为背景，设置透明，在div再加一个img就行。但是我项目未使用成功,整个div都是透明的，仅供参考。

vue切换不同样式的两种方法（大致示意）：

    //顶层图片

 //顶层图片

可以参考：（background-color属性可以实现背景图片透明，文字或者上方图片不透明。）http://caibaojian.com/w3c/css/pr_background-color.html

(rgba和rgb区别)https://blog.csdn.net/chen1057376155/article/details/52034385

2、切换显示的img。设置一个key，当img元素被点击(),定义的key默认为false，data(){return{key:false}}。当key从false变成true，切换这个div里面显示的img元素。（成功使用）

    

        //可以用v-bind绑定图片资源，也可以用css样式的方法导入图片资源
        
        
    
    

        
    

3、使用div层叠，设置两个div，一个position:relative;一个position:absolute; 就可以实现在div里面显示绝对定位，而不跑出div的层叠div，对于没有固定整个界面的width和height的情况适用。

如果界面的宽高都固定了像素值，可以不用在外层套div，直接写位置。

层叠原理：两个div的z-index层级不同，所以可将设为透明的图片放在下面，顶层的图片透明度正常。注意，同一个div里面有多个元素，该div设置透明度，则所有的div子元素都是同样透明度。

.parentClass{
    position:relative;
    z-index:-1;
}
.childClass{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;    //如果有别的高优先级的，影响覆盖效果，记得把这个设置高一点
}

4、img叠加样式，如果你的背景图片可以设置透明，那么可以考虑在一个img里面写,他们分别对应透明底图和正常图的样式。略。

5、div直接覆盖：原来正常的底图，被有透明度的底图+正常透明度新图/水印图覆盖。但是附近元素或者父容器的width和height要写死，这样可以将绝对布局的目标div覆盖过去到具体位置。略略。

6、用js降低色彩。叠加可以结合上述方法。透明度或者灰度，如果是彩图，直接降低就行了。可以参考https://www.cnblogs.com/j--d/p/j--d-javascript1.html

7、用js合并两个图片。可以参考https://www.cnblogs.com/cangqinglang/p/9483125.html

新手上路，自己花了好多小时摸索的。写法有很多种，希望可以抛砖引玉✌。

成果图（已打码）：