Question

我试图用背景图片复制这种侧边栏菜单的样式，但是当我使用相同的样式表代码和图像时，它不会跨越侧边栏的整个高度。

示例：http://demo.ponjoh.com/Simpla-Admin/index.html

使用的css（在示例网站和我的网站上）：

 #sidebar {
    background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
    color: #888888;
    font-size: 11px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 230px;
}

在我的网站上，图片仅显示其实际尺寸（230x197）并且未填充侧边栏。我错过了什么？

Answer 1

编码CSS的人实施了侧边栏的背景图像两次。一旦进入身体并进入侧边栏。

body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
    /* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}

以下是您所缺少的内容：

background: url("../images/bg-sidebar.gif") repeat-y top left;

Answer 2

您必须向bottom: 0;添加position: relative;和#body-wrapper并激活background-repeat。 但要注意！这是一种非常脏的CSS编码方法，可能会导致误解和失败 - 仍然有效。

#body-wrapper {
    /* Your code stuff ... */

    position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
    width: 230px;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
    color: #888888;
    font-size: 11px;
}

Answer 3

如果背景图片是可重复的图片......将no-repeat更改为repeat或垂直repeat-y

CSS边栏菜单背景图像问题

3 个答案: