-1

我对背景图像定位有疑问 - 因为我们都知道，定位一个重复自身并从顶部某个点开始的背景非常简单，我想说的是 - 假设我们想要一个黑色背景开始 100px从页面顶部开始，然后重复-y。

我的问题是 - 怎么可能做同样的效果，但背景从底部重复-y，我的意思是底部的这些 100px 空间不会被背景填充。

现在我很幸运能够做到，所以如果没有滚动，因为如果有滚动，那么我会看到黑色背景，然后在窗口底部看到 100px，如果我向下滚动，我会在底部看到 100px 条纹总是在滚动时。我想做的是让背景填满屏幕，但在底部剩下 100px 时停止

（在底部我想添加一个透明的徽标，因此当前无法选择用另一个元素或 z 索引技巧溢出一个元素的解决方案....）

body {
    background-image: url(UI/img/stripe-stripe.png)!important;
    background-repeat:  repeat-y !important;
    background-position: right -100px;
    background-color: #e6e2df !important;
}

这不起作用...我希望背景垂直重复，但在剩余 100 像素时停在底部。

4

1 回答 1

1

你为什么不把条纹应用到围绕你的内容的 div 上呢？您仍然可以在 body 标签上有一个背景，并在底部为包含您的徽标的 100px div 留出空间：

<body>
    <div class="content">
        Content goes here.
    </div>
    <div class="footer">
        Logo goes here.
    </div>
</body>

然后在你的CSS中：

div.content {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat:  repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
top:0;
bottom:100px;
width:100%;
}

div.footer {
height: 100px;
}
于 2013-08-12T12:09:20.453 回答