0

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

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

我的问题是哪个选项对我的目的来说是“最好的”。如果我选择 jquery 会导致任何性能问题。我将把这种方法用于响应式网站。我特别想使用 background 属性而不是 img 属性来实现语义和干净的编码。我将不胜感激任何建议。

4

3 回答 3

2 
<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>

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

于 2013-01-13T11:22:42.333 回答
1

显然 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;
}

查询

var backgroundResizeFun=function(){
$('#backgroundImg').css({
width:$(window).width()+'px',
height:$(window).height()+'px'
});
}
$(document).ready(function(){
backgroundResizeFun();
$(window).resize(function(){
backgroundResizeFun();
});
});
于 2013-01-12T05:52:22.433 回答
1

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

jsBin 演示

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


#bg{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:100%;
  background: url(bg.jpg) 50% / cover;
}
于 2013-01-12T05:32:50.610 回答