Question

对于我当前的一个项目，我正在建立一个各种部落的网站。他们让我创建了他们玩的游戏网格，我似乎在努力解决这个问题。

每个div个background-image个p和div元素用于游戏标题。目前，对于每个不同的游戏，我必须在我的样式表中创建一个新的left-margin和一个新类，我最终只更改了<div id="content" align="center"> <div class="content-box"> <div class="content-box-game-one"> <p>Just Cause 2</p> </div> <div class="content-box-game-two"> <p>War Thunder</p> </div> <div class="content-box-game-three"> <p>Borderlands 2</p> </div> <br /> <div class="content-box-game-four"> <p>Heroes and Generals</p> </div> <div class="content-box-game-five"> <p>Grand Theft Auto V</p> </div> <div class="content-box-game-six"> <p>Dirty Bomb</p> </div> <br /> <div class="content-box-game-seven"> <p>PayDay 2</p> </div> <div class="content-box-game-eight"> <p>Team Fortress 2</p> </div> <div class="content-box-game-nine"> <p>Coming soon...</p> </div> </div>并更改了该背景图像的文件路径。感觉对我来说有点浪费时间。

代码如下：

（HTML）

    #content {
    margin-top: 3px;
}

    .content-box {
        width: 1150px;
        height: 100%;
    }

        .content-box-game-one {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 80px;

            background-image: url('http://i.imgur.com/ZZtELB6.png');
            background-size: 400px;
        }

        .content-box-game-two {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 20px;

            background-image: url('http://war-thunder-hack.marioapps.net/assets/cheatmp/images/background.jpg');
            background-size: 400px;
        }

        .content-box-game-three {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 20px;

            background-image: url('http://www.hardcoregamer.com/wp-content/uploads/2012/10/borderlands2.jpg');
            background-size: 400px;
        }

        .content-box-game-four {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 80px;

            background-image: url('http://www.gamewallpapers.com/previews_480x300/wallpaper_heroes_and_generals_01.jpg');
            background-size: 400px;
        }

        .content-box-game-five {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 20px;

            background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/audio/video/2012/11/15/1352984366518/Grand-Theft-Auto-V-005.jpg');
            background-size: 400px;
        }

        .content-box-game-six {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 20px;

            background-image: url('https://metrouk2.files.wordpress.com/2012/11/article-1354195970386-16454a86000005dc-11033_636x353.jpg');
            background-size: 400px;
        }

        .content-box-game-seven {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 80px;

            background-image: url('http://www.gamechup.com/wp-content/uploads/2013/08/payday-2-featured-1.jpg');
            background-size: 400px;
        }

        .content-box-game-eight {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 20px;

            background-image: url('https://upload.wikimedia.org/wikipedia/en/5/59/TF2_Group.jpg');
            background-size: 400px;
        }

        .content-box-game-nine {
            border: 3px solid black;
            border-radius: 5px;
            margin-top: 20px;
            width: 300px;
            height: 200px;
            float: left;
            margin-left: 20px;

            background-image: url('http://www.exoticindia.com/religious/sfa47.jpg');
            background-size: 400px;
        }



            .content-box p {
                margin-top: 80px;
                font-family: Lobster;
                font-weight: bold;
                font-size: 30px;
                color: white;
            }

（CSS）

{{1}}

无论如何，我可以在我的样式表上创建一个类，并让它可以改变背景图像吗？还有其他解决这个问题的方法吗？

谢谢！

Answer 1

由于除了背景图像之外的所有其他属性都相同，因此您可以创建一个通用class，如：

.content-box-game {
        border: 3px solid black;
        border-radius: 5px;
        margin-top: 20px;
        width: 300px;
        height: 200px;
        float: left;
        margin-left: 80px;
        background-size: 400px;
    }

然后，您只需在其他类中指定background-image属性。

.content-box-game-one{
        background-image: url('http://www.hardcoregamer.com/wp-content/uploads/2012/10/borderlands2.jpg');
}

将这两个类添加到您的div

<div class="content-box-game content-box-game-one">
      <p>Borderlands 2</p>
</div>

个人背景的个人背景图像

1 个答案: