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

関数内で background-size を直接指定するとどうなりますか?

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

背景が変わると、以前の 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 に答える