在网站建设的过程中，我们经常会用到很多图片进行内容的展示。一旦图片涉及到照片甚至是企业证书展示时，我们就会想要在网页中放置大量的图片内容。

这种情况下当图片太多，我们就不得不把图片缩小放置在网页里面，但是缩小以后的图片容易看不清楚详细内容，特别是像证书一类的内容就更加看不清了。

所以我们的图文组件中有一个叫做“lightbox”的效果，打开以后网页中的图片点击以后就会放大出来展示给访客，我们可以如下图所示进行设置：

将“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复制进去并保存

最后的实际展示效果如下：

好啦，今天的教程就到这里了，大家赶快去试试吧，我们下期再见吧！