如何将不同的背景图像 URL 添加到一个 class？

Question

我有这些盒子，.partyboxFlag 这是一个 class，因为它们在分辨率等方面都一样。但是，我想要在 HTML 标记具有不同的 URL.

<html>

<head>
    <title>Learn which parties are doing what</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

        <div id = "header">

            <div id = "logo"></div>

        </div>

        <div id = "navbar">
                <ul>
                    <li><a href="index.html">Major Parties</a></li>
                    <li><a href="minor.html">Minor Parties</a></li>
                    <li><a href="whyvote.html">Why Vote</a></li>
                    <li><a href="about.html">About Us</a></li>
                </ul>
        </div>

    <div id = "wrapper">

        <div class = "topbox">

            <h1>The Conservative Party</h1>

            <div id = "listBox">
                <h2>Plan</h2>
                <p>The Conservatives have a long-term economic plan, which they intend to use to build a stronger, healthier economy.</p>
                <h2>Policies</h2>
                <ul>
                    <li>Reducing the Deficit</li>
                    <li>Cutting income tax and freezing fuel duty</li>
                    <li>Creating more jobs</li>
                    <li>Capping welfare and working to control immigration</li>
                    <li>Delivering the best schools and skills for young people</li>
                </ul>
            </div>

            <div id = "topboxFlag"></div>

            </div>

        <div class = "partybox">

            <h1>The Labour Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The Liberal Democrats</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The UK Independence Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The Green Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The Scottish National Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

    </div>



</body>

</html>

根据上面的代码，我希望每个部分都有不同的图像。

<div class = "partybox">

                <h1>The Liberal Democrats</h1>

                <div class = "partyboxFlag"></div>

            </div>

            <div class = "partybox">

                <h1>The UK Independence Party</h1>

                <div class = "partyboxFlag"></div>

            </div>

body
{
    background-color: #C6E0F5;
}

#wrapper
{
    position: relative;
    margin: auto;
    width: 100%;
    height: 2900px;
    max-width: 1000px;
    background-color: #C6E0F5;
}

#header
{
    position: relative;
    width: 100%;
    height: 170px;
    background-color: #00247D;
}

#navbar 
{
  position: relative;
  width: auto;
  bottom: 20px;
  height: 35px;
  text-align: center; 
  background-color: #CF142B;
}
  #navbar ul li 
{
    list-style-type: none;
    padding: 20px;
    text-align: center;
    font-family: "Trebuchet MS";
    font-size: 25px;
    display: inline; 
}
  #navbar ul li a 
{
    text-decoration: none;
    font-weight: bold;
    color: #fff; 
}

.topbox
{
    height: 400px;
    width: 100%;
    margin: auto;
    background-color: #00247D;
}

.topbox h1
{
    font-size: 35px;
    font-family: "Trebuchet MS";
    text-align: center;
    color: #fff;
    width: 500px;
    background-color: #CF142B;
    margin:0;
    float: left;
}

.topbox #topboxFlag
{
    float: right;
    width: 300px;
    height: 400px;
    background-image: url(../img/conservativesflag.png);

}

.topbox #listBox
{
    position: absolute;
    top: 30px;
    left: 10px;
    float: left;
    width: 500px;
    height: 300px;

}

.topbox #listbox ul li
{
    font-size: 18px;
    font-family: "Trebuchet MS";
    color: #fff;
}

.topbox #listbox h2
{
    font-size: 20px;
    font-family: "Trebuchet MS";
    color: #fff;
}

.topbox #listbox p
{
    font-size: 18px;
    font-family: "Trebuchet MS";
    color: #fff;
}


.partybox
{
    height: 400px;
    width: 100%;
    margin: auto;
    background-color: #00247D;
    margin-top: 15px;
}

.partybox h1
{
    font-size: 35px;
    font-family: "Trebuchet MS";
    text-align: center;
    color: #fff;
    width: 500px;
    background-color: #CF142B;
    margin:0;
    float: left;
}

.partybox .partyboxFlag
{
    float: right;
    width: 300px;
    height: 400px;
    background-color: #fff;
}

Answer 1

您将使用第 n 个子选择器。我做了一个 jsFiddle 来展示一个例子 https://jsfiddle.net/pz8skfLx/

.partyboxFlag:nth-child(1){background:#000;}
.partyboxFlag:nth-child(2){background:#ccc;}
.partyboxFlag:nth-child(3){background:#eee;}

Answer 2

如果我正确理解了你的问题（我想我理解了，但你永远不知道），你希望每个 <div class = "partyboxFlag"></div> 都有不同的背景图片，对吗？

所以，为了做到这一点，我会使用一个 ID 来指示这个特定的 URL（您也可以使用另一个 class，但由于您的背景似乎是独一无二的，ID 似乎路要走）。也就是说，您的标记将是：

<div class ="partyboxFlag" id="labour-party"></div>
<div class ="partyboxFlag" id="liberal-party"></div>
<div class ="partyboxFlag" id="green-party"></div>

还有你的CSS：

#labour-party{background-image: url('/somefile.jpeg')}
#liberal-party{background-image: url('/someotherfile.jpeg')}
#green-party{background-image: url('/yetanotherfile.jpeg')}

这样，您就可以随意使用标记，标志顺序将由您决定。 @Nick Delaney 的解决方案有效，但标志出现的顺序（我假设图像将是标志）由子项在标记中显示的顺序设置。如果您想在第一个和第二个之间放置一个新标志，那么您的逻辑就是这样。考虑到这一点，我认为使用 ID 更容易，因为它可以让您轻松维护代码。

Answer 3

在 Nick 回答之前我已经在处理这个问题了，因为它与您的代码更相关（我使用了您的标记）我想我仍然 post 它。

fiddle可以找到here

基本上您会将它们定位为：

.partybox:nth-child(2) .partyboxFlag {
    background-image: url(http://topnews.in/files/uk_flag_0.jpg);
}

.partybox:nth-child(3) .partyboxFlag {
    background-image: url(http://www.markpack.org.uk/files/2011/12/Lib-Dem-logo.jpg);
}

.partybox:nth-child(4) .partyboxFlag {
    background-image: url(http://madmikesamerica.com/wp-content/uploads/2015/02/ukip-flag.jpg);
}

.partybox:nth-child(5) .partyboxFlag {
    background-image: url(https://bsnews.info/wp-content/uploads/2013/09/green-party-uk.jpg);
}

.partybox:nth-child(6) .partyboxFlag {
    background-image: url(http://www.exaxe.com/wp-content/uploads/2013/12/Scottish-flag.png);
}

那么您还可以保留原来的 .partybox .partyboxFlag 标记：

.partybox .partyboxFlag {
    float: right;
    width: 300px;
    height: 400px;
}

如何将不同的背景图像 URL 添加到一个 class？

How can I add different background-image URLs to one class?

html

css

background-image