具有重叠内容的背景图像，具体取决于移动或桌面视图答案

【问题标题】：background image with overlapping content depending on mobile or desktop view具有重叠内容的背景图像，具体取决于移动或桌面视图
【发布时间】：2014-12-15 23:54:38
【问题描述】：

在移动设备/平板电脑和桌面设备之间遇到布局问题。

对于移动设备：我需要先显示英雄图片，然后才是其下方的内容。 (sample here)

对于平板电脑/台式机：我需要将内容放在英雄图片的顶部。 (sample here)

我尝试过使用背景图片，但发现调整页面布局会影响背景图片的大小和比例

我已经尝试过将一个绝对放置在另一个之上，但遇到了一种情况，即我最终摆弄了视图之间的布局（使用引导程序），而不是应该可以管理的内容。

希望对如何产生此结果有任何想法。

将尝试提供我所做的代码示例，但不确定它是否相关，因为它们似乎都没有产生预期的结果。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这是我为您创建的一个简单示例，请查看：

#container {
    background: red;
    text-align: center;
    padding: 20px 0px;
}
#image, #content {
    display: inline-block;
    width: 45%;
    vertical-align: middle;
}
#image img {
    width: 100%;
}

@media (max-width: 500px) {
    #image, #content {
         display: block;
         width: 100%;
    }
}

&lt;div id="container"&gt;&lt;div id="image"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/div&gt;&lt;div id="content"&gt;Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. &lt;/div&gt;

点击Run Code Snippet，在Full Page查看上面的sn-p，然后将浏览器窗口缩小到500px或更小，你会看到内容会自动进入图片下方。最初，包含图像和内容的<div> 都显示为inline-block，但对于小于500px 的屏幕，我们使用@media-queries 将它们的display 属性更改为block，这就是内容位于下方的原因图片。

【讨论】：

【解决方案2】：

这是我为完成您的要求而设置的 CodePen 示例：http://codepen.io/trevanhetzel/pen/pyCnf

本质上，如果您使用内联图像而不是背景图像，您可以在某个媒体查询断点处将其设置为position 到absolute。它的容器位于relative 和图像的兄弟 (.hero-content) 位于relative，您可以将其浮动在同一个断点处，将宽度更改为您想要的宽度，然后它就位于顶部图片。

HTML

<div class="hero-contain">
  <img src="http://lorempixel.com/1000/300/" class="hero-img">
  <div class="hero-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a enim eu risus accumsan venenatis. Donec venenatis nunc ac tellus tempor, ac rutrum lorem semper. Suspendisse pulvinar elit sed luctus pulvinar. Donec id ultricies dui. Pellentesque suscipit nulla maximus, mollis urna laoreet, tempor tortor.</p>
  </div>
</div>

CSS

.hero-contain {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}

.hero-img {
  max-width: 100%;
}

.hero-content {
  position: relative;
  background: rgba(255, 255, 255, .5);
  padding: 20px;
}

@media (min-width: 800px) {
  .hero-img {
    position: absolute;
  }

  .hero-content {
    float: right;
    width: 45%;
    margin: 20px;
  }
}

【讨论】：

【解决方案3】：

使用media queries。

当窗口宽度小于您的平板电脑/桌面内容时，切换媒体查询并仅显示您的 div 块。要在行中显示它们，请使用 display:inline-block;

Example。尝试调整结果窗口的大小。

【讨论】：