如何创建这种类型的段落

Question

我想创建一个网站，我需要一个段落就像这样。

矿是这样的：

下面是代码：

<section id="services" style="background-image:url(img/header-bg2.png); background-size:cover; background-position:right; background-repeat:repeat; min-height:100vh"> 
    <div class="container"> 
    <div class="col-xs-4" style="background-color:#FFF"> 
     <div class="col-xs-6"> 
     <img src="imagini/1.png" class="img-responsive img-circle" style="min-width:180px; min-height:180px" > 
     </div> 
     <div class="col-xs-6"><br> 
      Titlu de test Titlu de test Titlu de test <br><br><br> 
     </div> 

     <div class="col-xs-12" style="background-color:#FFF"><br> 
      Aici vine contextul care este tot de test 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <img src="imagini/1.png" class="img-circle" width="200px" height="200px"> 

    </div> 
    <div class="col-xs-4"> 
     <img src="imagini/1.png" class="img-circle" width="200px" height="200px"> 
    </div> 
     <div class="row"> 
     </div> 
    </div> 
</section> 

Answer 1

它看起来对我像你需要使用的CSS position的。

您可以尝试将position: relative添加到您的图片父级，并将position: absolute添加到您的图片。

然后给你的图像-50％的最高值。这将导致图像的一半移出父母50％。

见琴：

https://jsfiddle.net/cfqu2hms/1/