2012-05-10 11 views
0

「クリックすると」背景がぼやけてしまいます。そしてJQueryは、クリックして背景画像を暗くします

$(document).ready(function() { 
//this represents window.load in javascript. 

//now to select the element suppose you have anchor tag <a> with id=clickme 

$("#test").click(function() { 

//select the element whose background image you want to change. suppose with id=imgBack 
$("body").css({'background-image':'url(url to image)'}); 


}) 
}); 
+0

あなたが最初(のdivか何かで)この上に別の背景を追加する必要が0を持ちます100%の不透明度をフェードするよりも不透明です。 – Cristy

答えて

1

あなたはdiv要素を作成し、そこにbackgrund-イメージを持っている、それはディスプレイとして設定されている必要があります... it'sは働いて、しかし、私は画像がフェードインするクリックにしたいです:なし;

は、あなたのクリック機能に、あなたはあなたはそれが(ミリ秒)フェードインしたいどれだけ速く、それを伝える数に渡すことができますフェードイン()関数でこの

$('#wrapperdiv').fadeIn(); 

を行うので、あなたはそれをしたい場合400msの間アニメートするには、このように書くでしょう.fadeIn(400);

0

ここにはlive exampleです。

HTML:

<body> 
    <div id="no_background"></div> 
    <div id="wrapper"> 
    <!-- page content goes here --> 
    <input type="button" id="test" value="Show background"> 
    </div> 
</body> 

CSS:

body { 
    background: url(/path/to/background.png); 
} 

#no_background { 
    background: white;  
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

#wrapper { 
    position: relative; 
    z-index: 2; 
} 

JS:

$("#test").click(function() { 
    $("#no_background").fadeOut(); 
}); 
関連する問題