Question

我正在使用这个优秀的jQuery插件为我的网站提供全屏背景。这个插件目前填满了屏幕上的整个背景，我想知道是否可以给它一个保证金。例如，我想在屏幕右侧有150px的间隙（所以我可以看到机身背景），页面的其余部分将填充后伸。我玩过_adjustBG函数，但是我无法使用它。任何帮助将不胜感激。

Answer 1

由于此插件的作者没有选择保证金，我会为您调整一下。下面是您可能需要的修改后的_adjustBG（）函数。

只需打开文件“jquery.backstretch.js”（正常版本，而不是最小化版本），然后用此函数替换原始的_adjustBG（）函数（在文件末尾）。

function _adjustBG(fn) {
    var rightMargin = 150; //--- edit the margin value here
    try {
        bgCSS = {left: 0, top: 0}
        bgWidth = rootElement.width()-rightMargin;
        bgHeight = bgWidth / imgRatio;

        // Make adjustments based on image ratio
        // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
        if(bgHeight >= rootElement.height()) {
            bgOffset = (bgHeight - rootElement.height()) /2;
            if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
        } else {
            bgHeight = rootElement.height();
            bgWidth = bgHeight * imgRatio-rightMargin;
            bgOffset = (bgWidth - rootElement.width()) / 2;
            if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
        }

        $("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
                                                .filter("img").css(bgCSS);
    } catch(err) {
        // IE7 seems to trigger _adjustBG before the image is loaded.
        // This try/catch block is a hack to let it fail gracefully.
    }

    // Executed the passed in function, if necessary
    if (typeof fn == "function") fn();
}

Answer 2

更新

通过在控制台周围进行搜索，我发现如果从背景图像的宽度中减去150，默认情况下，它会在右侧为您提供边距。您可能需要调整高度以使图像缩放，但是，可能会在$（document）.ready（）中运行：

var $bg = $('#backstretch');
var newImgWidth = $bg.width() - 150;
$bg.css('width', newImgWidth);

Answer 3

如果IE6没有问题，您可以尝试将以下内容放在样式表中：

#backstretch{
    width: auto !important;
    right: 150px;
}

我在backstretch主页上尝试了这个，它按照我的预期工作。由于我不熟悉这个插件，请随时纠正我。

（jQuery插件：backstretch）边缘边缘

3 个答案: