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

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

成果图(已打码)：