html - 图像边缘出现白色像素线

Question

JsFiddle
代码:

.iconsbg_container {
  width: 100%;
  -webkit-animation: iconsbg_container 10s linear infinite;
  -moz-animation: iconsbg_container 10s linear infinite;
  -ms-animation: iconsbg_container 10s linear infinite;
  animation: iconsbg_container 10s linear infinite;
}

.EG_icons_a,
.EG_icons_b,
.EG_icons_c,
.iconsbg_container {
  overflow: hidden;
}

.icons_container {
  padding: 50px 0;
  width: 50%;
  max-width: 900px;
  position: relative;
  margin: 0 auto;
}

.EG_icons_a,
.EG_icons_b,
.EG_icons_c {
  background-image: url('http://davidwillprice.com/wp-content/uploads/2018/03/Icons-sprite-sheet2.png');
  background-size: auto 100%;
  width: 100%;
}

.EG_icons_b,
.EG_icons_c {
  height: 100%;
  position: absolute;
}

.EG_icons_a {
  position: relative;
  margin: 0 auto;
  padding-bottom: 75%;
}

.EG_icons_b {
  -webkit-animation: EG_icons_b 10s linear infinite;
  -moz-animation: EG_icons_b 10s linear infinite;
  -ms-animation: EG_icons_b 10s linear infinite;
  animation: EG_icons_b 10s linear infinite;
  background-position: 50% 50%;
}

.EG_icons_c {
  -webkit-animation: EG_icons_c 10s linear infinite;
  -moz-animation: EG_icons_c 10s linear infinite;
  -ms-animation: EG_icons_c 10s linear infinite;
  animation: EG_icons_c 10s linear infinite;
  background-position: 100% 100%;
}


/*20 13 20 13 20 13  */


/*20 33 53 66 86 100  */

@-webkit-keyframes EG_icons_b {
  0%,
  20% {
    opacity: 0;
  }
  33%,
  53% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}

@-moz-keyframes EG_icons_b {
  0%,
  20% {
    opacity: 0;
  }
  33%,
  53% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}

@-ms-keyframes EG_icons_b {
  0%,
  20% {
    opacity: 0;
  }
  33%,
  53% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}

@keyframes EG_icons_b {
  0%,
  20% {
    opacity: 0;
  }
  33%,
  53% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes EG_icons_c {
  0%,
  53% {
    opacity: 0;
  }
  66%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes EG_icons_c {
  0%,
  53% {
    opacity: 0;
  }
  66%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes EG_icons_c {
  0%,
  53% {
    opacity: 0;
  }
  66%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes EG_icons_c {
  0%,
  53% {
    opacity: 0;
  }
  66%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes iconsbg_container {
  0%,
  53% {
    background-color: #ffffff;
  }
  66%,
  86% {
    background-color: #48616e;
  }
  100% {
    background-color: #ffffff;
  }
}

@-moz-keyframes iconsbg_container {
  0%,
  53% {
    background-color: #ffffff;
  }
  66%,
  86% {
    background-color: #48616e;
  }
  100% {
    background-color: #ffffff;
  }
}

@-ms-keyframes iconsbg_container {
  0%,
  53% {
    background-color: #ffffff;
  }
  66%,
  86% {
    background-color: #48616e;
  }
  100% {
    background-color: #ffffff;
  }
}

@keyframes iconsbg_container {
  0%,
  53% {
    background-color: #ffffff;
  }
  66%,
  86% {
    background-color: #48616e;
  }
  100% {
    background-color: #ffffff;
  }
}

<div class="iconsbg_container">
  <div class="icons_container">
    <div class="EG_icons_a">
      <div class="EG_icons_b"></div>
      <div class="EG_icons_c"></div>
    </div>
  </div>
</div>

我制作了一个基本的 CSS 幻灯片，但在某些分辨率下使用 Chrome 时，图像右侧出现白色像素线。

我在 IE 或 Firefox 上根本看不到这条线。

目前我在桌面上使用 Chrome 64.0.3282.186，但我也在移动设备上看到它。

我觉得我遗漏了一些明显的东西；任何帮助表示赞赏。

Answer 1

这条白色的 1px 线是第二次插入的背景图像的一部分，因为浏览器在计算背景图像宽度方面存在一些小错误。为避免这种情况，您必须在 css 中添加一行。对于 .EG_icons_a, .EG_icons_b, .EG_icons_c 添加 background-repeat: no-repeat; - 它会有所帮助。