css 将一个带背景的Div定位在另一个带背景的Div上，并使其偏移

mlnl4t2r 于 2023-04-23 发布在其他

关注(0)|答案(2)|浏览(149)

我有两个div：

back具有背景图像
front有一个透明的背景图像放在顶部。

我想使用封面，并在中间的位置，使图像削减/增长双方平等。html和css看起来像这样：

.back{
  background-image: url('https://i.ibb.co/W5rb9Mp/358-1676542377653745.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.front{
  background-image: url('https://i.ibb.co/NtXq0Sv/297-1676449694919336.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

<div class="back">
  <div class="front">
  </div>
</div>

请注意，这是一个简化的版本。在应用程序中，这个分层的图像将在一个容器中。
这是正确的，这完全是我想要的。然而，正如你所看到的，水龙头不适合Flume的位置，所以我想添加一个偏移到顶部的图像，使其匹配。x1c 0d1x
我尝试了很多不同的方法，比如添加background-position: 50% calc(50% + 40px);或填充和边距。但问题是，当窗口大小改变时，我无法将front图像保持在正确的位置。

如果有一个解决这个问题的方案，只依赖于CSS，但使用JS的其他选项也可以工作，这将是伟大的。如果可能的话，我不想使用画布，因为这将使事情变得非常复杂。
注意：我知道最简单的解决方案是编辑front图像并重新上传，但问题是我正在开发的应用程序具有不同高度的Flume，因此需要动态纠正。

css

来源：https://stackoverflow.com/questions/76062953/positioning-a-div-with-background-with-an-offset-over-another-div-with-backgroun

2条答案

按热度按时间

kb5ga3dv1#

根据所了解的是，您需要设置轻触表，如图所示是第二个图像（右侧）
这里是CSS解决方案，在你的代码中只有一个轻微的变化：

.back {
  background-image: url('https://i.ibb.co/W5rb9Mp/358-1676542377653745.png');
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  /*reduce hight by 5 px i donnt think so it will affect image quality but it will achieve your goal*/
  height: 95%;
  position: absolute;
  z-index: 1;
}

.front {
  background-image: url('https://i.ibb.co/NtXq0Sv/297-1676449694919336.png');
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

<!-- take your front out of back div (anyhow you are taking care in z-index) -->
<div class="front">
</div>
<div class="back">
</div>

它在全屏工作真的很好。你可以检查如果高度95/94为你工作。让我知道如果我已经正确理解你的问题或没有谢谢。

赞(0）回复(0）举报 2023-04-23

w8ntj3qf2#

一些快速修复和使用Bootstrap框架的建议：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title></title>
    <style type="text/css">
        .back{
  background-image: url('https://i.ibb.co/W5rb9Mp/358-1676542377653745.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 60%;
  /*reduce hight by 5 px i donnt think so it will affect image quality but it will achieve your goal*/
  height: 60%;
  top: 20%;
  left: 20%;
  position: absolute;
  z-index: 1;
}

.front{
  background-image: url('https://i.ibb.co/NtXq0Sv/297-1676449694919336.png'); 
  background-position: 50% 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  bottom: 02%;
  position: absolute;
  z-index: 2;
  transform: scale(01) translate(0, 5%);
}
    </style>
</head>
<body>
    <!-- take your front out of back div (anyhow you are taking care in z-index) -->
 <div class="container ">
    <div class="row">

<div class="back col-md-3 col-xs-12 col-sm-6" >
  <div class="front col-md-3 col-xs-12 col-sm-6" >
  </div>
</div>
    </div>
 </div>
</body>
</html>

请复制并在您的系统上运行此代码，我测试了响应性，以及使用开发工具在我的边缘浏览器
只是如果你放大缩小，那么它会有一点不同
在您的系统中尝试，而不是在此代码段中尝试

赞(0）回复(0）举报 2023-04-23

我来回答

css 将一个带背景的Div定位在另一个带背景的Div上，并使其偏移

2条答案

相关问题

热门标签

最新问答