jquery - 图像放置 CSS

Question

我有 4896x421 图片我想让这张图片向左移动 247 “没有这个 img 永远结束”有没有办法在“真实”图像的左右重复图像，这样我就不会得到“白点”来移动这个图像？

起始位置:div没有“白点”

https://www2.pic-upload.de/img/32898926/1.png

几秒钟后(右侧出现白点):

https://www2.pic-upload.de/img/32898925/2.png

我编辑了图像，这样如果我多次拍摄图像并将它们并排放置，它们看起来就像一张大图像，我是否可以只填充 div 而不显示整个图像？

$('#bg1').animate({'left': 1000},10000,'linear');

#wrapper {
	top: 75px;
	left: 5px;
	width:1777px;
	height:1000px;
	overflow: hidden;
	position:relative;
}

.bg{
	top: 0px;
	left: 0px;
	position: absolute;
}
#bg1{
	background-image: url("../img/bg3.png");
  background-color:#000;
	background-repeat: repeat-x;
	z-index: 10;
	height: 100%;
	width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
			<div id="bg1" class="bg"></div>
</div>

伙计们!

Answer 1

试试这个!

JSfiddle with comments

$(function() {
  var $image = $('#bg1');
  var imgW = $image.css("background-size").replace('px', ''); //negative number of backgroung image size
  
  //comment out if you want it to move from right to left
  imgW = imgW * -1; 
	var num = 0;

  function animate_img() {
  	if (num == 1) {
    	num = 0;
      $image.css("background-position-x", "0")
    }
    
    $image.animate({
        backgroundPositionX: imgW + 'px'
      }, 10000, "linear",
      function() {
        num = 1;
        animate_img();
      });
  }
  animate_img();
});

.bg {
  top: 0px;
  left: 0px;
  position: absolute;
}

#bg1 {
  background: url('https://www2.pic-upload.de/img/32898905/bg3.png') 0 0 repeat-x;
  background-size: 1000px;
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="bg1" class="bg"></div>
</div>