将“lightbox”效果打开以后,我们还可以给图文组件加一个简单的代码效果,来引导访客点击图片,具体操作如下:
1、添加一个代码组件,将下列代码复制进去并保存:
<style>
._156uptb1kg02v{
}
.wei-loupe .zz-comp-list__item .img {
position: relative;
cursor: pointer;
}
.wei-loupe .zz-comp-list__item .img:after {
content: '';
width: 35px;
height: 35px;
background-color: rgba(0,0,0,.3);
position: absolute;
bottom: 0;
right: 0;
background: rgba(0,0,0,.3) url(https://f.cdn-static.cn/12954_16085423790635.png?imageView2/2/w/1800/q/75) center no-repeat;
background-size: 85%;
pointer-events: none;
}
</style>
2、点击图文组件-设置-代码-自定义class,将wei-loupe复制进去并保存
最后的实际展示效果如下:
好啦,今天的教程就到这里了,大家赶快去试试吧,我们下期再见吧!
常见问题