html – 在背景图像下定位DIV,无论视口(响应)

2023年1月4日 238次阅读

我有一个1920x550px的大背景图像,我想在它下面放置一个div.

由于我不知道如何显示完整的图像,我使用了一个肮脏的技巧,实际上用透明的部分填充图像,所以它是1920×1080的图像,然后我用这个显示它：

.bg-image-big{
    background: url(../images/header-bg-big.png) no-repeat center center fixed;
    background-color: #f7f7f7;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这使它始终全屏.
现在有两个问题：这不适用于移动设备(剪切图像),我不知道如何将内部div正好放在实际横幅的“结束”下方.在理论上和1920×1080的屏幕上,它是550px的边缘顶部.

<div class="section bg-light-gray bg-image-big">
   <div class="inner">
      <!-- placed right under the end of the banner -->
   </div>
</div>

任何更好的方法(非常确定有).任何暗示赞赏！

就此而言,我使用的是Bootstrap3和FullPage.js

//编辑：

根据要求可视化：

我想要的是：
《html – 在背景图像下定位DIV,无论视口(响应)》

是)我有的：
完整的桌面
《html – 在背景图像下定位DIV,无论视口(响应)》

响应
《html – 在背景图像下定位DIV,无论视口(响应)》

这不是关于6/8/12宽度,而是关于这些元素的位置.
希望这有助于多一点……

最佳答案 略有不同的解决方案.您可以使用其中的画布HTML元素来控制图像容器的比例.

我们唯一需要修复的是图像下容器的宽度.查看此页面以获得有关如何使用CSS Media Queries的基本知识.
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

body {
  margin: 0;
}
canvas {
  display: block;
  width: 100%;
  height: auto;
}
.bg-image-big {
  background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center;
  background-color: #f7f7f7;
  background-size: cover;
}
.wrapper {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f0f0f0;
}
.inner {
  position: relative;
  display: block;
  width: 50%;
  padding: 30px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid black;
  text-align: center;
  box-sizing: border-box;
}
.inner p {
  display: none;
}


@media only screen and (min-width: 280px) {
  .inner {
    width: 100%;
  }
  .inner p.col-12 {
    display: block;
  }
  /* 12-Columns Width */
}

@media only screen and (min-width: 768px) {
  .inner {
    width: 66.66%;
  }
  .inner p.col-8 {
    display: block;
  }
  /* 8-Columns Width */
}
@media only screen and (min-width: 1024px) {
  .inner {
    width: 50%;
  }
  .inner p.col-6 {
    display: block;
  }
  /* 6-Columns Width */
}
<div class="bg-image-big">
  <canvas width="100" height="25" />
</div>
<div class="wrapper">
  <div class="inner">
    <p class="col-6">min-width: 1024px</p>
    <p class="col-8">min-width: 768px</p>
    <p class="col-12">min-width: 280px</p>
    <span>Behold, some content!</span>
  </div>
</div>
点赞