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

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

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

有两种使用纯CSS的方法，第一种是使用绝对坐标。 例如

#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。

注意：如果您在使用“分层”时遇到问题，请参阅“z-index”CSS属性。

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

<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> 

通知段落元件左属性如何为=（IMG左）+（IMG宽度）。这意味着它将为图片旁边的段落提供一个起点，使它们不会重叠。

Answer 2

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

注：图片和文字将自动换行于非常小的设备。

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>