Question

我已经使用单个图像成功创建了完整的背景图像滚动效果。我用来实现这个的代码是这样的：

<html>
<head>
    <title>BackGround Slide</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         // speed in milliseconds
         var scrollSpeed = 70;

         // set the default position
         var current = 0;

         // set the direction
         var direction = 'h';

         function bgscroll() {

             // 1 pixel row at a time
             current -= 1;

             // move the background with backgrond-position css properties
             $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");

         }

         //Calls the scrolling function repeatedly
         setInterval("bgscroll()", scrollSpeed);
    </script>
    <style type="text/css">
        body {
            background-image: url('http://i.imgur.com/yhBqRw6.jpg');
        }
    </style>
</head>
<body>

</body>
</html>

这可以按预期工作。但是，图像的开头和结尾之间有明确的界限。有没有办法说，实现连续效果，其中图像的开始和结束不是那么明显。我的意思是，这可以使用CSS / JS实现，还是需要编辑/修改图像本身？

这是当前输出的样子：

Scroll Background

谢谢

Answer 1

CSS＆amp; JS不会这样做。

您可能能够找到一个jQuery插件或者其他类似的插件，我找不到它。

编辑图像应该是最佳选择。

Answer 2

您需要修改图片。这是一个使用photoshop制作Tiled Background图像的教程：

http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/

Answer 3

为此，您需要使用对称背景，请查看以下背景：

CSS：

 body {
        background-image: url('http://i.stack.imgur.com/C11AY.png');
    }

流体/连续图像滚动背景

3 个答案: