Question

嘿家伙我一直在尝试与我的CSS背景不同的东西，以便制作标题行。我想让它设置好，所以这条线由5个相同大小的部分组成，每个部分都是不同的颜色。这是一个示例 enter image description here 我已经设置了代码但是我无法正确显示背景我在下面有我的代码。任何帮助将不胜感激，谢谢！

HTML：

<div id="div-line">
    <div class="blockOne"></div>
    <div class="blockTwo"></div>
    <div class="blockThree"></div>
    <div class="blockFour"></div>
    <div class="blockFive"></div>
</div>

CSS：

    #div-line {
    width:100%;
    height:5px;
}

.blockOne {
    width:20%;
    background-image:url(../images/orangeBlock.png);
    background-repeat:repeat-x;
}

.blockTwo {
    width:20%;
    background-image:url(../images/blueBlock.png);
    background-repeat:repeat-x;
}

.blockThree {
    width:20%;
    background-image:url(../images/darkOrangeBlock.png);
    background-repeat:repeat-x;
}

.blockFour {
    width:20%;
    background-image:url(../images/orangeBlock.png);
    background-repeat:repeat-x;
}

.blockFive {
    width:20%;
    background-image:url(../images/BlueBlock.png);
    background-repeat:repeat-x;
}

Answer 1

您需要浮动DIV元素并添加高度。 Working DEMO

在HTML中添加了通用CSS类block：

<div id="div-line">
    <div class="block blockOne"></div>
    <div class="block blockTwo"></div>
    <div class="block blockThree"></div>
    <div class="block blockFour"></div>
    <div class="block blockFive"></div>
</div>

并调整了CSS：

    #div-line {
       width:100%;
       height:5px;
    }

    .block {
      height:100%;
      float:left;
      width:20%;  
    }

    .blockOne {
       background-color:red;   
    }

    .blockTwo {
        background-color:black; 
    }

    .blockThree {
        background-color:red; 
    }

    .blockFour {
            background-color:black; 
    }

    .blockFive {
           background-color:red; 

    }

Answer 2

您可以使用background颜色来实现此目的。你的div没有出现的原因是因为你需要给它们一个高度，你需要将它们浮动到左边。

#div-line div {
    float:left;    
    }

#div-line {
    width:100%;
    height:5px;
   }

.blockOne {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

.blockTwo {
    width:20%;
    height:100%;
    background:#FFA500;
    }

.blockThree {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

.blockFour {
    width:20%;
    height:100%;
    background:#FFA500;
    }

.blockFive {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

工作样本here。

Answer 3

为什么要使用可以使用背景颜色的背景图像？

如果使用背景颜色，您至少可以卸载服务器。

.blockN {
 width: 20%;
 background-color: #0094ff; // or your color
}

Answer 4

做这样的事情

.blockOne {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockTwo {
width:20%;
background-image:url(images/blueBlock.png);
background-repeat:repeat-x;
}

.blockThree {
width:20%;
background-image:url(images/darkOrangeBlock.png);
background-repeat:repeat-x;
}

.blockFour {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockFive {
width:20%;
background-image:url(images/BlueBlock.png);
background-repeat:repeat-x;
}

或

.blockOne { width:20%; background-image:url(./images/orangeBlock.png); background-repeat:repeat-x; } .blockTwo { width:20%; background-image:url(./images/blueBlock.png); background-repeat:repeat-x; } .blockThree { width:20%; background-image:url(./images/darkOrangeBlock.png); background-repeat:repeat-x; } .blockFour { width:20%; background-image:url(./images/orangeBlock.png); background-repeat:repeat-x; } .blockFive { width:20%; background-image:url(./images/BlueBlock.png); background-repeat:repeat-x; }

你想要做的事情，即background-image:url(images/orangeBlock.png)在linux中使用。

CSS背景没有显示

4 个答案: