1

我有一个背景图像被拉伸以适应整个屏幕。我正在尝试编写一个脚本，将背景更改为另一个图像。我当前的脚本不会拉伸图像以适应整个屏幕，而是将图像居中。这个问题出现在 Firefox、IE 和 Opera 中。Chrome 和 Safari 似乎不受影响。我按照本教程创建了整页背景图像。

CSS：

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

JavaScript：

$('#previous').click(function() {
    $('html').css('background', 'url(img/01.jpg) no-repeat center fixed');
});

$('#next').click(function() {
    $('html').css('background', 'url(img/02.jpg) no-repeat center fixed');
});
4

2 回答 2

3

如果尝试直接在函数中说背景大小怎么办？

$('#next').click(function() {
    $('html').css('background', 'url(img/02.jpg) no-repeat center fixed');
    $('html').css('background-size', 'cover');
});

因为我认为当背景发生变化时，previous background-size 属性可能不适用于新图像......

于 2012-05-07T00:33:34.440 回答
2

试试这个，它对我有用。

CSS 
    body {
    background-image: url('img/bg2.jpg');
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }
    
.body {
    clear: both; 
    margin: 0 auto; 
    width: 70%;
}

在html中我使用了以下脚本

 $(document).ready(function() {

 $("#tb").click(function() {
 var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(img/p2.jpg)';
    
  });

});

其中 tb 是我用来更改背景图像的按钮。

于 2013-12-28T08:25:04.380 回答