如何放置填充整个屏幕但在底部某个位置停止的背景图像

How to place a background-image that fills the entire screen but stops at a certain position from the bottom?

本文关键字：位置 图像 背景 填充 何放置 屏幕 底部      更新时间：2023-09-26

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

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

就目前而言，我很幸运，如果没有滚动，我会看到黑色背景，然后在窗口底部看到100像素，如果我向下滚动，我总是在滚动时看到底部的100像素条纹。我想做的是让背景填充屏幕，但当底部还剩100像素时停止

（在底部，我想添加一个透明的徽标，所以用另一个元素溢出一个元素或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像素时停止在底部。

为什么不将条纹应用于内容周围的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;
}
相关文章：