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

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

成果图(已打码):

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值