Question

我有一个1920x550px的大背景图像，我想在它下面放置一个div。由于我不知道如何显示完整的图像，我使用了一个肮脏的技巧，实际上用透明的部分填充图像，所以它是1920x1080的图像，然后用这个显示它：

.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正好放在＆＃34; end＆＃34;实际的横幅。在理论上和1920x1080的屏幕上，它是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

//编辑：

根据要求进行可视化：

我想要的：

我拥有的：完整的桌面

响应

这不是关于6/8/12宽度，而是关于这些元素的位置。希望这会有所帮助...

Answer 1

略有不同的解决方案。您可以使用其中的canvas 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>

Answer 2

我有同样的问题。这是我解决的方法。

背景图像已附加到body元素上。原始图片尺寸为1920px x 1080px。

我计算出高宽比为56.25。

对于要放置在图像下方的元素，我使用了以下方法：

#page-area {
    margin-top: 56.25vw;
}

随着视口宽度的改变，图像的高度也会改变。因此，我将页边距设置为与图片相同的高度。

Answer 3

我认为您已走上正轨 - 我觉得您可能需要定义bg-image-big的最小高度，并将position类型定义为相对;因为外部div的位置已定义为relative，您应该能够执行以下操作：

＆＃13;

.bg-image-big{
    margin:0px;
    padding:0px;
    position:relative;
    display:inline-block;
    background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center fixed;
    background-color: #f7f7f7;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height:40vh;
    width:100%;
}

.inner {
    position: absolute;
    display: inline-block;
    padding:30px;
    left:50%;
    bottom:-100px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width:50%;
    background:white;
    border: 5px solid black;
    text-align:center;
}

＆＃13;

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

＆＃13;

无论视口（响应）如何，在背景图像下定位DIV

3 个答案: