Question

所以，我有这个：

.cmon
{
    background-repeat: repeat-x;
    background-image: url("line2.png");
    position:absolute;
    bottom:0px;
}

它应该做什么，将图像（在这种情况下为线条）放在页面底部，从我理解的，并重复它。它确实把它放在底部，但不重复，任何人都知道我的问题是什么？这是代码打开时的样子： http://goolag.pw/temptest.html 此外，在菜单（右上角）中，图像甚至不会显示，也不会显示在底部。如果有人知道这个问题，我会非常高兴。（对不起，如果这里不允许链接，网上没有商业广告，这只是为了表明问题所在）

Answer 1

要定位背景图片，您应该使用background-position property：

.cmon {
    background-repeat: repeat-x;
    background-image: url("line2.png");
    background-position: bottom;
}

background-position CSS属性设置初始位置，相对于background-origin为每个定义的背景图像定义的背景位置图层。

但是，您需要确保您的元素有一些height和width，因为背景图片不是内容，不会影响元素的大小。

Answer 2

首先，你的问题不仅仅是关于CSS而是关于HTML。您必须在.cmon，<span>甚至<p>等其他标记上附加您的属性<div>。

<div class="cmon"></div>

然后是你的CSS：

.cmon {
    background-repeat: repeat-x;
    background-image: url("line2.png");
    position: absolute;
    bottom: 0px;

    left: 0px; right: 0px; // For having a full width bar
    z-index: 999999; // Will be always visible, even when the menu is showed up
    height: 4px; // attribute the height of your image
}

希望这对你有所帮助。

Ps：别忘了使用HTML5！

CSS底部定位

2 个答案: