我怎麼能把文本放在已經在背景圖像上的圖像旁邊？

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>