css 更改用于Envira Gallery灯箱的默认导航箭头图像。

Posted 2021-05-13

/** Customize the Envira Gallery lightbox navigation arrows **/
.envirabox-wrap .envirabox-next span { 
  background-image: url('http://example.com/images/envira-arrows.png'); /* update with url to own navigation arrow image */
  background-position: right;
  background-size: 200%;

  /* May be necessary to change the default height and width values to account for your specific background image. */
  width: 53px;
  height: 34px;
  
  /* This value should be half the height value */
  margin-top: -17px;
}

.envirabox-wrap .envirabox-prev span { 
  background-image: url('http://example.com/images/envira-arrows.png'); /* update with url to own navigation arrow image */
  background-position: left;
  background-size: 200%;
  
  /* May be necessary to change the default height and width values to account for your specific background image. */
  width: 53px;
  height: 34px;
  
  /* This value should be half the height value */
  margin-top: -17px;
}

/* Use Media Queries to indicate the retina image you wish to use for the navigation arrows to replace the defaults */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2 / 1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) {
    .envirabox-prev span, .envirabox-next span {
        background-image: url('http://example.com/images/envira-arrows-retina.png') !important;
        background-size: 53px 34px !important;
    }
}