Question

我有这些框，.partyboxFlag这是一个类，因为它们在分辨率等方面具有相同的一切。但是，我希望在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

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

所以，要做到这一点，我会使用一个ID来指定这个特定的URL（你也可以使用另一个类，但由于你的背景似乎是唯一的，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 2

您将使用第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 3

在Nick的回答之前我已经在研究这个了，因为它与你的代码更相关（我使用了你的标记），我以为我还会发布它。

可以找到小提琴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？

3 个答案: