Question

我花了几个小时上网并浏览一些网络开发书籍以找到答案。我的图片大小为1920x1289。此图像将用于背景。我希望图像被修复，保持居中，填充可见的浏览器区域，不会导致任何滚动条。我遇到过使用纯css的解决方案，例如background-size:cover;和b ackground-size:100% auto;。我熟悉CSS而不是jquery。我遇到了以下脚本：

http://louisremi.github.com/jquery.backgroundSize.js/demo/

我的问题是哪个选项对我来说是“最好的”。如果我去jquery会导致任何性能问题。我会将此方法用于响应式网站。我特别想使用background属性而不是img属性用于语义和清理编码。我很感激任何建议。

Answer 1

<style type="text/css">
    body {
        height: 100%;
        background: url('images/someimage.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

这将在所有浏览器中正确调整大小。

Answer 2

如果你不害怕对IE7,8说'再见'，你可以简单地使用
CSS3 background-size （以及一些背景位置中心技巧）：

jsBin demo

<div id="bg"></div>

#bg{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:100%;
  background: url(bg.jpg) 50% / cover;
}

Answer 3

显然css比jquery更好，因为它们有点快。如果您不担心旧浏览器，请使用css3。但是如果你想为所有浏览器使用jquery，但是不要添加额外的插件来实现它。相反，你可以通过不将图像设置为背景并使用img标签来尝试小技巧。

这里是代码

HTML

 <img src="your img source" id="backgroundImg"/>

CSS

#backgroundImg{
width:100%;
height:100%;
z-index:-100; //so it will not overlay on other elements
position:absolute;
top:0px;
left:0px;
}

JQUERY

var backgroundResizeFun=function(){
$('#backgroundImg').css({
width:$(window).width()+'px',
height:$(window).height()+'px'
});
}
$(document).ready(function(){
backgroundResizeFun();
$(window).resize(function(){
backgroundResizeFun();
});
});

如何创建跨浏览器兼容的完整背景图像/

3 个答案:

jsBin demo