Question

我使用这篇文章Stretch and scale a CSS image in the background - with CSS only来弄清楚如何拉伸我的背景图像以适应大小。我正在使用background-size：cover;

但我害怕，这不是我需要的安静。我无法弄清楚（一个好方法）如何做到这一点：假设我的图像分辨率非常宽，如3840px x 1024px

要求：

图片居中
视口宽度＆lt; 1280px：固定宽度为1280px，水平可滚动视口宽度＆gt; = 1280px：无水平滚动，显示更多背景图像
如果网站的内容真的很长（1024px以上）我想在图像上方添加一种颜色，如浅蓝色，如果图像的上半部分是天空，那么看起来像bg颜色是图像。

当前的实施（很糟糕）：图像被切成3个偶数块。中间部分是内容部分的背景。如果屏幕宽度增加，将显示中间部分左右两个div，它们将图像的左侧和右侧部分作为背景）。每次调整窗口大小时，都会使用js计算此边div的大小（高度和宽度）。背景图片的偏移量在Chrome中有效，但在Firefox中左侧div存在问题。

这个代码是：

var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){

    var bodyWidth = $('body').width();
    var fillerSize = Math.floor((bodyWidth - PageWidth)/2);

    if(bodyWidth < PageWidth){
        $('#fillerLeft').hide();
        $('#fillerRight').hide();
    }
    else{
        var imageOffset = SideImageWidth - fillerSize;
        var mainHeight = $('#main').outerHeight();
        $('#fillerLeft').width(fillerSize).height(mainHeight).show();
        # Doesn't seem to work
        if($.browser.mozilla){
            $('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
        }
        $('#fillerRight').width(fillerSize).height(mainHeight).show();
    }
}

有一个很好的方法吗？没有js？

如果您不理解任何要求，请询问。

谢谢

编辑：我有一个（近乎工作）的方法：

#main{
    background-color: #d4eaff;
    background-image: url('forest-wide.jpg');
    background-repeat: no-repeat;
    background-size: auto 1280px;
    background-position: center top;
    min-width: 1280px;
}

如果内容不高于1024px，这很不错，但是当它超过1024px时，它会将蓝色添加到底部，所以我必须在此时将背景位置更改为中心底部。

Answer 1

如果您正在尝试的是获得完全拉伸的背景图像，那么我认为这可以帮助您....纯粹基于CSS的作品在Safari 3 +，Chrome Whatever +，IE 9 +，Opera 10+， Firefox 3.6 +

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

中心背景图像和上面添加背景颜色

1 个答案: