出现在图像边缘的白色像素线

时间:2018-03-11 11:43:05

标签: html css

JsFiddle
Code:

.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,但我也在手机上看到它。

https://i.imgur.com/mAXEHmY.png

我觉得我错过了一些明显的东西;任何帮助表示感谢。

1 个答案:

答案 0 :(得分:1)

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