CSS 使背景图像错位

Question

我有两个 div .navigation 和 .entry-image

.navigation {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background-color: #008dd0;
    background-blend-mode: multiply;
    z-index: 100;
    color: #fff;
    background-size: cover;
    background-position: top;
}

.entry-image {
    height: 100vh;
    background-size: cover;
    text-align: center;
    position: relative;
    background-position: top;
}

背景在宽屏上对齐良好，但设置为 size:cover，它们不会保持对齐，因为它们响应明显。 我已经尝试过 background-size:100% - 这在 100vh 上不起作用，因为它会重复。

关于如何在父容器上保持 100vh 的同时保持背景对齐的任何建议。这都是由于 .navigation 应用了多重混合模式，这只需要在 .navigation div 后面

代码笔:https://codepen.io/lisa-jaffe/pen/jOErBBX

Answer 1

希望我正确理解了您的问题。如果是这样:

如果您要实现的目标是在图像顶部进行某种叠加，那么您可以使用适当的“叠加”，而不是尝试对齐 2 张图像，这相当困难，这要简单得多.

我所做的是删除 navigation 图像，而是使用具有透明度的背景色。您会得到与您的代码相同的结果，但没有对齐问题。

.navigation {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background-color: rgba(6, 84, 121, 0.7);
    z-index: 100;
    color: #fff;
    height:300px;
}

.entry-image {
    height: 100vh;
    background-size: cover;
    text-align: center;
    position: relative;
    background-position: top;
    background-image:url(https://loremflickr.com/1680/1050);
}

<div class="navigation"></div>
<div class="entry-image"></div>

这是一个 codesandbox如果你需要那个