使绝对定位的背景图像响应

编程问答 2022-05-25

问题描述

我目前有两张背景图片，一张相对定位在另一张绝对定位的图片下方。这会产生如下结果：

enter image description here

我注意到的是，容器包装器的 padding-top 属性为 90px，但绝对定位的背景图像完全忽略了这一点。我也无法将div的宽度或高度设置为100%，看来我必须将高度或宽度设置为固定高度。

想要的结果 我试图实现的结果是，随着屏幕尺寸的缩小，图像也会缩小，并且绝对定位的 div 会附着在父容器的填充和边距上。如果这是可能的，我不确定。

我的代码JSX代码如下：

    <div className="App">
      <div className='h-ctr-outer'>
      <div className="h-btm-par">
        <div className="h-btm-overlay-ctr">
          <div className="h-btm-img-1"></div>
          <div className="h-btm-overlay"></div>
        </div>

        <div className="h-btm-img-2"></div>
      </div>
      </div>
    </div>

我的css代码如下：

.App {
  max-width: 1280px;
  padding: 0 1rem;
  margin: 0 auto;
}

.h-ctr-outer {
  padding-top: 90px;
}

.h-btm-par {
  position: relative;
}

.h-btm-par {
  position: relative;
}

.h-btm-img-1 {
  height: 569px;
  width: 480px;
  background-image: url("https://i.imgur.com/uzZcw9L.jpg");
  background-size: cover;
}

.h-btm-overlay-ctr {
  position: relative;
}

.h-btm-overlay {
  position: absolute;
  Box-sizing: border-Box;
  height: 569px;
  width: 480px;
  top: 0;
  right: 0;
  left: 0;
  background-color: #141414bf;
}

.h-btm-img-2 {
  position: absolute;
  bottom: 59px;
  left: 59px;
  height: 569px;
  width: 480px;
  background-image: url("https://i.imgur.com/T5MiFKu.jpg");
  background-size: cover;
  padding: inherit;
  margin: inherit;
  Box-sizing: inherit;
}

@media only screen and (max-width: 1280px) {
  .App {
    max-width: 1280px;
    padding: 0 1rem;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 980px) {
  .App {
    max-width: 980px;
    padding: 0 1rem;
    margin: 0 auto;
  }
}

以下链接包含用于调试的代码沙箱！ https://codesandbox.io/s/competent-haze-omf57?file=/src/styles.css:0-1029

任何和所有建议将不胜感激

解决方法

图像将忽略这一点，因为它是绝对的，但它被包裹的 div 的位置是静态的。要获得您正在寻找的结果，您需要将包装器的位置更改为绝对位置并应用图像的相同属性。

,

例子：

<html>
 <div class='wrapper'>
    <img src='whatever' class='wrapper_img'>
 </div>
</html>

上面的代码包含页面的html。在此代码中，图像被包裹在 div 包装器下。我要做的是，当位置是绝对的时，也将图像的属性应用到 div。

CSS：

.wrapper {
    position: absolute;
    height: 10%;
    width: 10%;
}
.wrapper_img {
    position: absolute;
    height: 10%;
    width: 10%;
}

我想说的是，对于具有绝对位置的图像，使用 div 将无济于事。将图像包装在 div 中是没有用的，而且是浪费时间。相反，您可以仅将属性应用于图像。并使用@media 查询更改其在手机中的宽度。

如果你还不明白。让我知道。

javascriptnode-sassreactjsreactjsreactjsreactjssasssass