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