html - 无论屏幕大小如何，背景位置都是固定的

Question

我正在处理的网站的背景上有两张图片，现在对我来说，在 15 英寸的屏幕上，这些图片的位置看起来不错，就在内容容器的后面和右/左。但是在大宽屏幕上（或其他屏幕尺寸比我的大得多）它们最终离内容容器更远，看起来就像它们是独立的。

它们是基于百分比的，但是在我的屏幕上从左/右起 25% 与使用宽屏的人不同。无论如何，我都需要它们处于相同的位置。距离中心的 X% 可能更喜欢它。有人知道合适的选择吗？我附上了一些图像现在使用的代码。

主页上草药背景图片的 CSS（左上角）

.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}

主页上辣椒背景图片的 CSS（右下）

.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}

score 1 · Accepted Answer

根据需要使用该left属性和减号margin-left进行对齐：

.herb-bg-img {
    position: absolute;
    left: 50%;
    margin-left: -600px; // Change as needed
    margin-top: 5%;
    z-index: -2;
}

与右侧图像相同，仅使用正片margin-left代替。

无论屏幕宽度如何，这都应该保持不变。

score 0 · Accepted Answer

您正在绝对定位这两个图像。但是，它们应该相对于带有的父元素绝对定位position: relative。现在它们与页面相关，这将继续给您带来问题。

我建议添加position: relative到您的.container元素中。

2 回答 2