WordPress主题制作-简单实现动态背景

之前有摆弄过这个功能，不过实现之后非常消耗资源，今天扒了一段比较精简的代码，可以很轻松就实现动态背景，气泡上升。

步骤一

这个相当于一个jQuery插件，所以需要jQuery库的支持，本站使用的是jq 1.11.1版本。至于你用什么方法加载可以自由决定。

步骤二

准备一张上下无缝重复的透明背景图片，这种图片一般是png格式。因为接下来我们就得通过一段简单的js代码让这张图片在指定的div内滚动起来。发挥你的想象力应该可以很容易理解。你可以自己制作，也可以从网上找，也可以下载我提供的这张
图片下载地址

步骤三

添加控制图片滚动的js代码（看注释）：

// 动态背景
$(function() {
       var backgroundheight = 2000;
        offset = Math.round(Math.floor(Math.random()* 2001)); 
    function scrollbackground() {
           offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
           $('#footer').CSS("background-position", "50% " + offset + "px"); // #footer改为背景容器
           setTimeout(function() {
            scrollbackground();
            }, 1 // 这个是速度，数值越小移动越快
        );
       }
    scrollbackground(); // 执行背景滚动
});

步骤四

相应的CSS，看上面的注释，我将#footer作为动态背景的容器，当然你也可以用body，整个网页来实现。所以#footer的css如下：

#footer{background:url(img/dynamic_bg.png) rgba(0,0,0,0.2);width:100%}

可以看出css其实没有什么，就是引用上面准备好的背景图片而已。如果你的id没有搞错那么完成以上步骤之后就可以看到效果了。

WordPressPS抠图换背景