html - 个别 Div 的个别背景图片

Question

对于我当前的一个元素，我正在为一个部落开发一个网站。他们要求我创建一个他们玩的游戏网格，而我似乎正在为此苦苦挣扎。

每个单独的 div 都包含一个 background-image 和一个用于游戏标题的 p 元素。目前，对于每个不同的游戏，我必须在我的样式表中创建一个新的 div 和一个新的类，最后我只稍微改变了 left-margin 并且更改该背景图像的文件路径。这对我来说有点浪费时间。

代码如下:

(HTML)

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

(CSS)

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

我是否可以只在我的样式表上创建一个类并使用它来更改背景图像？还有其他方法可以解决这个问题吗？

谢谢!

Answer 1

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

.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>