0

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

我有一个具有默认重复所有背景图案的 div，但如果将按钮悬停或单击，则会发生变化。背景不会重复，所以我试图弄清楚如何根据浏览器大小（即 div 大小）让它们扩展/调整大小。

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

请注意默认是如何重复模式，而另一个是完整的 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 代码保持在最低限度。

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;
}

只需更改背景属性：

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

只要确保您使用的图像足够大，可以在大显示器上很好地显示。因为背景图像居中，所以它会在左侧和右侧扩展和裁剪。

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

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

特别是 auto或cover。

跟进问题：

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

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

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

于 2012-12-10T02:23:03.567 回答