背景：实现点击事件，触发原图的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
新手上路，自己花了好多小时摸索的。写法有很多种，希望可以抛砖引玉✌。
成果图（已打码）：
