Question

我很难意识到如何编写需要动态背景的div背景。 div具有特定高度，但宽度是浏览器的大小。

我有一个div，它具有默认的repeat-all背景图案，但如果按钮悬停或点击则会更改。背景不重复，所以我试图弄清楚如何根据浏览器大小（即div大小）扩展/调整大小。

以下是它的样子......默认：http://i.imgur.com/yMZEZ.png类别1（悬停/按下）：http://i.imgur.com/OMhjT.png

注意默认是重复模式，另一个是full-bg。

我的代码目前是：

$("#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的宽度动态调整另一个背景。

我也不确定如何在保持js代码最小化的同时为点击和悬停进行干净和最佳的更改。

Answer 1

尝试使用background-size:100%它是一个css3属性，它将根据它的容器调整背景图像的大小

了解更多信息，请查看w3schools here

Answer 2

我会做一般背景课，重复但是中心：

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

只需更改背景属性：

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

确保使用足够大的图像在大显示器上很好地显示。因为背景图像的中心是它在左侧和右侧扩展和裁剪。

另一种方法是查看background-size属性（但并非所有浏览器都支持）：

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

特别是自动或封面。

跟进问题：

如果您使用jQuery再次删除CSS，它应该转换回默认的.game-bg类背景：

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

但是，如果你点击其中一个项目......然后将鼠标悬停在其他项目上。它将恢复为默认背景，而不是“活动”项目。如果你也想要它变得有点复杂。然后，您应该为活动的项添加活动类。并在mouseout上查找具有活动类的项目，查找ID并根据ID应用正确的背景。我希望这是有道理的： - ）

在翻转时替换响应div背景并单击

2 个答案: