我试图用背景图像复制这种侧边栏菜单的样式,但是当我使用相同的样式表代码和图像时,它不会跨越侧边栏的整个高度。
例子: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)并且未填充侧边栏。我错过了什么?
编码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;
如果背景图像是可重复的图像...将no-repeat
更改为repeat
或垂直repeat-y
你将不得不在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;
}