html - 在三个花车上覆盖一个div - Thinbug

在三个花车上覆盖一个div

时间：2013-03-15 19:42:42

标签： html css

我需要一些帮助，将<div>覆盖在其自己的容器中样式为<div>的其他3个float:left元素上。

现在看起来像这样（http://i.imgur.com/2xk4tax.jpg），我希望文本叠加在三条浮动的彩色线上。

这是我的hmtl / css，我们将不胜感激。

HTML

<body>  

<div id="introtextcontainer">
    <p>hi</p>
</div>
<div id="linecontainer">
    <div id="line1">
    </div>
    <div id="line2">
    </div>
    <div id="line3">
    </div>
</div>

</body>

CSS

#introtextcontainer {
    margin: 0px auto 0px auto;
    width: 500px;
    height: 100px ;
    text-align:center;
    font-color: black;
    float:middle;
}

#linecontainer {
    margin: 0px auto 0px auto;
    width: 500px;
    height: 3000px ;
}

#line1 {
    width:160px;
    height:2000px;
    background-color: #00A7B0;
    float:left;
}

#line2 {
    width:160px;
    height:2000px;
    background-color: #D1DE3E;
    float:left;
}

#line3{
    width:160px;
    height:2000px;
    background-color: #DE006B;
    float:left;
}

2 个答案:

答案 0 :(得分：0)

只需将position:absolute和width:100%添加到您的introtextcontainer容器中，它似乎有效：

#introtextcontainer {
    margin: 0px auto 0px auto;
    height: 100px;
    text-align:center;
    font-color: black;
    position:absolute;
    width:100%;
}

jsFiddle example

请注意，没有此类float:middle;属性（仅限左侧或右侧）。

答案 1 :(得分：0)

你也可以定位：绝对#linecontainer在文本后面向上滑动（我也用左边居中：50％; margin-left： - 0.5 * width）。您可能必须给文本一个位置：relative;的z-index：1;迫使它在最上面。

#introtextcontainer {
    margin: 0px auto 0px auto;
    height: 100px;
    text-align:center;
    font-color: black;
    position:relative;
    width:100%;
    z-index:1;
}
#linecontainer {
    margin: 0 0 0 -250px;
    width: 500px;
    height: 3000px;
    position:absolute;
    top:0;
    left:50%;
}

甚至更好，使用渐变生成器，删除3个div并使条形成背景：http://www.colorzilla.com/gradient-editor/

#introtextcontainer {
    margin: 0px auto 0px auto;
    height: 100px;
    text-align:center;
    font-color: black;
    position:absolute;
    width:100%;
    background: rgb(0,167,176); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwMGE3YjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiNkMWRlM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzNCUiIHN0b3AtY29sb3I9IiNkMWRlM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NiUiIHN0b3AtY29sb3I9IiNkMWRlM2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NiUiIHN0b3AtY29sb3I9IiNkZTAwNmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgba(0,167,176,1) 33%, rgba(209,222,62,1) 33%, rgba(209,222,62,1) 34%, rgba(209,222,62,1) 66%, rgba(222,0,107,1) 66%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(33%,rgba(0,167,176,1)), color-stop(33%,rgba(209,222,62,1)), color-stop(34%,rgba(209,222,62,1)), color-stop(66%,rgba(209,222,62,1)), color-stop(66%,rgba(222,0,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* IE10+ */
    background: linear-gradient(to right,  rgba(0,167,176,1) 33%,rgba(209,222,62,1) 33%,rgba(209,222,62,1) 34%,rgba(209,222,62,1) 66%,rgba(222,0,107,1) 66%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a7b0', endColorstr='#de006b',GradientType=1 ); /* IE6-8 */

}