如何创建此类段落

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/