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

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

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

1、切换背景样式。设置一个key，当div元素触发点击事件（<div @click="functionName"></div>）时，key的值从false变成true，修改底图的透明度background-color:rgba(颜色，颜色，颜色，透明度)，或者修改background-color:transparent;

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

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

<div @click="functionName" :class="{'原来透明的样式名':(key==false),'透明的样式':(key==true)}">
    <img :src="pictureSource"/>//顶层图片
</div>

<script>
export default {
  data() {
    return {
      key: false,
    };
  },
  methods: {
    functionName: function () {
      this.key = true;
    },
  },
};
</script>

<div @click="functionName" v-if="key==true" :style="styleName">
<img :src="pictureSource"/> //顶层图片
</div>

<script>
//对应vue绑定的样式
export default{
    data(){
        return {
            styleName:{
                backgroundImage: "url(" + require("@/assets/imgs/code.png") + ")", //vue绑定的样式在data中不能有带'-'的属性名
                backgroundRepeat: "no-repeat",
                // backgroundPosition: "center",
                backgroundSize: "100%",
                backgroundColor: "rgba(255, 255, 255, 0.5)", //属性值都要是字符串而不是数字或者上下文未定义的变量
        }
    }
}
</script>

可以参考：（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元素被点击(<img @click="functionName"/>),定义的key默认为false，data(){return{key:false}}。当key从false变成true，切换这个div里面显示的img元素。（成功使用）

<div @click="clickFunction" class="parentClass">
    <div>
        //可以用v-bind绑定图片资源，也可以用css样式的方法导入图片资源
        <img v-if="key==false" :src="pictureSource"/>
        <img v-if="key==true" :src="pictureSource" style="opacity:0.3"/>
    </div>
    <div class="topPicture">
        <img v-if="key==true" :src="topPicture">
    </div>
<div>

<style>
    .parentClass{
        position:relative;
        width:100%;
        height:172px;
        z-index:1;
    }
    .topPicture{
        position:absolute;    //顶图仅图案部分是非透明的，是和底图一样的大小，否则要调位置
        width:100%
        height:172px;
        top:0;
        left:0;
        bottom:0;
        right:0;
        z-index:2;
    }
/*如果要调图片大小在框内，不变形，记得给样式类定好宽高*/

</style>

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里面写<img v-bind:class="className" v-bind:style="styleName" />,他们分别对应透明底图和正常图的样式。略。

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

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

成果图（已打码）：