Question

我一直在开发一个需要跨浏览器兼容性的网站（包括早期的IE），我有一个使用渐变的侧边栏，但事实证明它使用设置的背景图像大约一百万倍，我有图像的高度通过取决于主容器的高度来正确重复，但我想做同样的宽度。

我知道如何根据其他人的大小来拉伸div，但我想知道我怎么能有一个条件语句重复图像y直到div的结尾所以它不仅仅是移动设置图像！

我使用这个来实现基于身高的重复：

<script type="text/javascript">

var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);


</script>

我正在尝试使用此代码：

<script type="text/javascript">

var divWidth = $('#SecondaryContent').width() + 1;


if (divWidth.width() > 200) {
    alert('hello');
 $('#SecondaryContent').css('background', 'url(../images/background_slice.png)', 'repeat-x 18% 0%');
}


</script>

但似乎无法在div中找到任何内容。

Answer 1

这些CSS可能会有所帮助

background-repeat: repeat; // repeats x and y
background-repeat: repeat-x; // repeats x
background-repeat: repeat-y; // repeats y

Answer 2

以为我会更新，我设法使用此功能：

<script type="text/javascript">

$(document).ready(function () {
    divExpander();
    divLineExpander();
    divWindowLineExpander();
})

function divExpander() {
    var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
}

    function divLineExpander() {
        var theWidth = $('#SecondaryContent').width() + 2;
        $('#Navigation').css('min-width', theWidth);
    }

$(window).bind("resize", divWindowLineExpander);
function divWindowLineExpander(e) {
    var theLineWidth = $('#SecondaryContent').width() + 1;
    $('#Navigation').css('min-width', theLineWidth);
    }

 </script>

根据div大小重复图像

2 个答案: