Question

考虑这些简单的CSS规则：

div#container {
    width: 50%;
    height: 260px;
    background-image: url('Image.png');
    background-repeat: repeat-x;
}

问题是我只想要完整的图像。如果没有足够的空间容纳另一个副本，则不应显示它。

我从来没有听说过CSS为它提供了规则。那么如何在JavaScript中实现它（jQuery已经包含在内）？

Answer 1

目前的CSS规则无法做到这一点。你可以重复一次，或永远重复。另一种方法是缩小包含元素的大小以适合CSS中的最近重复点（如果你知道页面加载前的宽度）或JS（如果你不知道）。

这是后一个使用jQuery的实现：

var $container = $("#container");
var bgImg = extractUrl($container.css("background-image"));
var $img = $("<img />", { "src" : bgImg }).hide().appendTo("body");

$container.width(nearest($("#container").width(), $img.width()));
$img.remove();

function extractUrl(input) {
    // remove quotes and wrapping url()
    return input.replace(/"/g, "").replace(/url\(|\)$/ig, "");
}

function nearest(n, v) {
    n = n / v;
    n = Math.floor(n) * v;
    return n;
}

Example fiddle

Answer 2

这适用于百分比宽度，并在屏幕调整大小时自动调整。

$(window).on('load resize', function () {
    var img = $('<img/>');
    img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg').load(function () {
        var height = this.height;
        var width = this.width;
        var divWidth = $('#containerwrap').width();
        var extra = divWidth % width;
        $('div#container').width(divWidth - extra);

    });
});

div#container {
    width: 670px;
    height: 260px;
    margin:0 auto;
    background: url('http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg') left center;
    background-repeat: repeat-x;
}
#containerwrap{
    width:100%;
    height: 260px;
    background-color:#000000;
}

<div id="containerwrap">
  <div id="container">
    Test
  </div>
</div>

http://jsfiddle.net/upjkd/14/show

Answer 3

由于服务器修正了宽度，并且服务器知道图像的大小 - 为什么不将图像构造为正确并忘记重复，或者使宽度适合大小以便它适合整个图像数量？

Answer 4

请参阅http://jsfiddle.net/upjkd/10/

var img=document.createElement('img');
img.src="http://upload.wikimedia.org/wikipedia/commons/0/0c/Fussball.jpg";
document.body.appendChild(img);
var con=document.getElementById('container'),
    numImages=Math.round(con.clientWidth/img.clientWidth);
con.style.backgroundSize=con.clientWidth/numImages+'px';
document.body.removeChild(img);

您可以使用Math.round(con.clientWidth/img.clientWidth)确定图像的重复次数，然后使用con.style.backgroundSize=con.clientWidth/numImages+'px'确保图像数量是一个整合器（仅限完整图像）。

隐藏部分背景重复

4 个答案:

这适用于百分比宽度，并在屏幕调整大小时自动调整。