html - 我怎么能把文本放在已经在背景图像之上的图像旁边？

Question

这就是我想要完成的。该背景是一张图片，上面还有另一张图片:

到目前为止，我已经使用了这个:

<img src="https://www.vizsy.com/public/images/brandow/Landing_Page_background.png" style="position: relative; top: 0; left: 0;"/>      

<img src="http://www.psychiatry.emory.edu/images/cloud2.png" style="position: absolute; top: 30px; left: 70px;"/>

但是现在，我无法将文字放在如图所示的图片旁边。

仅使用 html 和 css 怎么能做到这一点？

Answer 1

这是一个基于 Bootstrap 的解决方案...

注意:图像和文本会在非常小的设备上自动换行。

body {
  background-image: url(http://placehold.it/1000/afeeee?text=background+cover);
  background-position: center;
  background-size: cover;
}
img{
  width: 100%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-4"><img src="http://placehold.it/400?text=logo"></div>
    <div class="col-sm-8"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
  </div>
</div>