javascript – 将重复背景图像与容器底部的非重复背景图像对齐

2024年2月2日 173次阅读

我有一个可变大小的容器,它有一个重复的背景图块,可以伸展以任何宽度填充容器.我需要容器的高度,使其始终是1个瓷砖高度的倍数 – 这样我就可以将容器的底部与’end’瓷砖无缝对齐,后者是以下容器的bg图像.

我试图用jQuery做,但我的代码不工作…

注意：重复的背景必须从TOP开始,因为它上面有另一块它连接起来(所以在这种情况下设置背景块从底部重复的解决方案不适用 – 这只是在最佳)
我需要javascript才能正常工作,而不是只更改CSS.

小提琴：http://jsfiddle.net/nRe7R/1/

这是JS：

function seamlessBottomBg() {
    var container = $('#container1');
    var bgTileAspectRatio = 65/1163;
    var tileWidth = container.outerWidth();
    var tileHeight = tileWidth * bgTileAspectRatio;
    //calculate how many px high the 'cutoff' last bg tile is, if there is a cutoff part
    var cutOffTileHeight = container.outerHeight() % tileHeight;
    if(cutOffTileHeight !== 0) {
    container.css('padding-bottom', tileHeight-cutOffTileHeight+1+'px'); 
        }
    }
seamlessBottomBg();

和CSS：

#container1 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-repeating_zps52e98fe2.jpg);
    background-repeat: repeat-y;
    width: 80%;
    margin: 0 auto;
    padding: 3em 10% 0;
    max-width: 1200px;
}
#container2 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-bg-bottom_zps441e1bc3.jpg);
    background-repeat: no-repeat;
    width: 80%;
    margin: 0 auto;
    padding: 3em 10% 0;
    max-width: 1200px;
}

最佳答案 我相信如果你将背景图像设置为底部,它将向上重复.不确定这是不是你想要的,但这里是
fiddle

#container1 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-repeating_zps52e98fe2.jpg);
    background-repeat: repeat-y;
    background-position: bottom;
    width: 80%;
    margin: 0 auto;
    padding: 3em 10% 0;
    max-width: 1200px;
}
点赞