Z-index中的ngx-图库图像

时间:2018-09-10 16:09:34

标签: css angular typescript

我正在使用图像库获取角度ngx-图库 https://www.npmjs.com/package/ngx-gallery 我有以下问题:您在照片中看到的房屋图像出现在具有照片和说明的容器后面,请尝试通过将z-index设置为-1来对其进行修复,以使其出现在容器后面照片上出现问题,我无法单击具有z-index:-1的容器,我的问题是:

  1. 可以从库中编辑图像的行为吗?
  2. 是否有解决此问题的最佳方法?

the image is superimposed on another container 这是库Ngx-Galley的配置

this.galleryOptions = [
  {
      width: '600px',
      height: '400px',
      thumbnailsColumns: 4,
      /* imageAnimation: NgxGalleryAnimation.Slide, */
      previewZoom: true,
      previewKeyboardNavigation: true,
      previewCloseOnEsc: true,
      previewCloseOnClick: true
  },
  // max-width 800
  {
      breakpoint: 800,
      width: '100%',
      height: '600px',
      imagePercent: 80,
      thumbnailsPercent: 20,
      thumbnailsMargin: 20,
      thumbnailMargin: 20
  },
  // max-width 1200
  {
    breakpoint: 1200,
    width: '100%',
    height: '600px',
    imagePercent: 80,
    thumbnailsPercent: 20,
    thumbnailsMargin: 20,
    thumbnailMargin: 20
  },
  // max-width 2000
  {
    breakpoint: 2000,
    width: '100%',
    height: '600px',
    imagePercent: 80,
    thumbnailsPercent: 20,
    thumbnailsMargin: 20,
    thumbnailMargin: 20
  },
  // max-width 400
  {
      breakpoint: 400,
      preview: false
  }
];

这是HTML

  

<div class="col-md-6 col-lg-6" style="text-align: center">

  <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

</div>

0 个答案:

没有答案