Question

我有一个叫做导航的css类，它会保留一些链接，当我添加一些额外的链接时，它会从左到右，然后再次来到LHS的底部。我使用background-repeat：repeat-y;和身高：汽车;但图像并没有重复，而是白色背景即将到来。我正在研究IE8。 css代码如下：

#navigation {
    background: url(../images/custom/lite/navigation_bg.gif);
    border-top: 7px solid #455660;
    height: auto;
    background-repeat:repeat-y;
}

#navigation ul,
#add-page {
    float: left;
}

#navigation a {
    color: #FFF;
    display: block;
    font: 14px/56px Arial,Helvetica,sans-serif;
    font-weight:bold;
    height: 50px;
    padding: 0 24px;
    text-decoration: none;
}

#navigation a:hover {
    color: #000;
}

 #navigation .selected a {
    color:#000
}

 #navigation .selected a {
    font-size: large;
    text-transform: uppercase;
}

Answer 1

您的HTML是什么样的？您说您有一个名为navigation的类，但您的选择器语法是ID。

为了让你的CSS工作如此处所示，你应该有类似

的东西

<div id="navigation">...</div>

Answer 2

将您的CSS更改为以下内容：

.navigation {
    background: url(../images/custom/lite/navigation_bg.gif);
    border-top: 7px solid #455660;
    height: auto;
    background-repeat:repeat-y; }

.navigation ul,
#add-page {
    float: left; }

.navigation a {
    color: #FFF;
    display: block;
    font: 14px/56px Arial,Helvetica,sans-serif;
    font-weight:bold;
    height: 50px;
    padding: 0 24px;
    text-decoration: none; }

.navigation a:hover {
    color: #000; }

 .navigation .selected a {
    color:#000 }

 .navigation .selected a {
    font-size: large;
    text-transform: uppercase; }

Answer 3

@reuben，您在float中提供了ul，因此您已明确#navigation

像这样：

#navigation {
    overflow:hidden;
}

可能对你有所帮助

css背景重复不起作用

3 个答案: