如何将文本放在已经位于背景图像顶部的图像旁边？

Question

这就是我想要实现的目标。那个背景是一个图像，还有另一个图像：

到目前为止，我已经使用过这个：

Cancel

但是现在，我无法将图片放在图片旁边。

怎么可以只用html和css来做呢？

Answer 1

图像已经在背景图像上的事实不应该改变任何东西。

使用纯CSS有两种方法，第一种是使用绝对坐标。 e.g。

#img {
      left: 40px;
      top: 40px;
      height: 80px;
      width:  80px;
         }

#textblock {
      left: 140px;
      top: 40px;
      width: 200px;
      }

第二种是使用相对定位。哪个会根据屏幕尺寸而改变。

#img {
      left: 10%;
      top: 10%;
      height: 5%;
      width:  5%;
         }

#textblock {
      left: 30%;
      top: 10%;
      width: 60%;
      }

注意：两个示例均假设您的文本块具有id = textblock且您的图片具有id = img。

注意：如果您在使用＆＃34;分层＆＃34; （什么是最重要的）请参考＆＃34; z-index＆＃34; CSS属性。

编辑：使用更新的代码并利用内联样式中的width属性可以实现简单地将left属性添加到width属性以获取文本的位置，以便图像不会与文本重叠。

<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; width:200px"/>

<p style="position: absolute; top: 30px; left: 270px; right:20px">some text</p>

注意段落元素的left属性是=（img left）+（img width）。这意味着它将以不会重叠的方式为图像旁边的段落提供一个起点。

Answer 2

这是一个基于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>