CSS背景不显示

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

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

来源

2013-10-06 kduan

为什么不简单地使用边框？ –

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

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

<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-06 14:16:18

谢谢，这工作得很好！ – kduan

你为什么要使用背景图片，你可以使用背景颜色？

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

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

来源

2013-10-06 14:13:14

您可以通过使用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。

来源

2013-10-06 14:20:48 Laniakea

谢谢！其他人回答之前，但它sitll工程！ – kduan

做这样的事情

.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-06 14:30:12

CSS背景不显示

回答

相关问题