0

動的な背景を必要とする div の背景をコーディングする方法を理解するのに苦労しています。div には特定の高さがありますが、幅はブラウザーのサイズです。

デフォルトのすべて繰り返しの背景パターンを持つ div がありますが、ボタンにカーソルを合わせるかクリックすると変更されます。背景は繰り返されないため、div サイズであるブラウザーのサイズに基づいて背景を拡大/サイズ変更する方法を見つけようとしています。

これがどのように見えるかです... デフォルト: http://i.imgur.com/yMZEZ.pngカテゴリ 1 (ホバー/プレス): http://i.imgur.com/OMhjT.png

デフォルトが繰り返しパターンであり、もう一方が完全な背景であることに注意してください。

私のコードは現在：

$("#select_all").click(function(e) {
        $("#selected-game").removeClass('game_bg_minecraft').removeClass('game_bg_terraria').removeClass('game_bg_dayz');
     });
     $("#select_minecraft").click(function(e) {
        $("#selected-game").addClass('game_bg_minecraft').removeClass('game_bg_terraria').removeClass('game_bg_dayz');
     });
     $("#select_terraria").click(function(e) {
        $("#selected-game").addClass('game_bg_terraria');
     });
     $("#select_dayz").click(function(e) {
        $("#selected-game").addClass('game_bg_dayz');
     });

HTMLコード 

<div id="selected-game">
<div class="row">
    <div class="ten columns">
    <h1>TopTitle</h1>
        <div>
        <h4>Selected Game Title</h4>
        </div>
    </div>
</div>
</div>
<div id="game-selection">   
    <div class="select_game">
        <button id="select_all" class="demo-change btn btn-info" style="display: inline-block;">Default</button>
        <button id="select_minecraft" class="demo-change btn btn-info" style="display: inline-block;">Category1</button>
        <button id="select_terraria" class="demo-change btn btn-info" style="display: inline-block;">Category2</button>
        <button id="select_dayz" class="demo-change btn btn-info" style="display: inline-block;">Category3</button>
    </div>
    <div class="game-options">
        More stuff here, yo!
    </div>
</div>

しかし、ここでの問題は、新しいボタンを追加するたびに、他のすべてのクラスを削除する必要があるか、新しい背景が表示されないリスクがあることです。また、divの幅に基づいて動的にサイズを変更しながら、1つの背景を繰り返す方法についても迷っています。

また、js コードを最小限に抑えながら、クリックとホバーの両方をクリーンかつ最適に変更する方法もわかりません。

4

2 に答える 2

1

background-size:100% コンテナに基づいて背景画像のサイズを変更するcss3プロパティを使用してみてください

詳細については、ここでw3schools をチェックしてください

于 2012-12-10T02:14:18.227 に答える
1

私は繰り返すが中央にある一般的なバックグラウンドクラスを作成します:

.game-bg{
    background: url("default-bg.jpg) repeat center;
}

background プロパティを変更するだけです。

$("#select_item1").click(function(e) {
    $("#selected-game").css('background-image', 'url("myimage.jpg")');
});

大きなモニターできれいに表示するのに十分な大きさの画像を使用するようにしてください。背景画像は中央に配置されるため、左右で拡大およびトリミングされます。

もう 1 つの方法は、background-size プロパティを確認することです (ただし、これはすべてのブラウザーでサポートされているわけではありません)。

http://www.css3.info/preview/background-size/

特にautoまたはcover。

フォローアップの質問:

jQuery を使用して CSS を再度削除すると、デフォルトの .game-bg クラスの背景に変換されます。

$("#selected-game").css('background-image', ''); //leave the background empty

ただし、アイテムの 1 つをクリックすると.... 他のアイテムにカーソルを合わせます。「アクティブな」アイテムではなく、デフォルトの背景に戻ります。また、それが必要な場合は、もう少し複雑になります。次に、アクティブなアイテムにアクティブなクラスを追加する必要があります。マウスアウト時に、アクティブなクラスを持つアイテムを探し、ID を検索し、ID に基づいて適切な背景を適用します。これが意味をなすことを願っています:-)

于 2012-12-10T02:23:03.567 に答える