1

嘿家伙，我一直在尝试与我的 CSS 背景不同的东西，以制作标题行。我想设置它，使这条线由 5 个大小相等的部分组成，每个部分都是不同的颜色。这是一个示例在此处输入图像描述 ，我设置了代码，但无法正确显示背景我的代码在下面。任何帮助将不胜感激，谢谢！

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

4 回答 4

3

您需要浮动DIV元素并添加高度。 工作演示

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

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

    }
于 2013-10-06T14:16:18.807 回答
1

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

工作样本在这里。

于 2013-10-06T14:20:48.253 回答
0

为什么要在可以使用 background-color 的地方使用背景图像？

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

.blockN {
 width: 20%;
 background-color: #0094ff; // or your color
}
于 2013-10-06T14:13:14.703 回答
0

做这样的事情

.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中使用。

于 2013-10-06T14:30:12.180 回答