Question

我对此很新，但是我设法在我的图像上设置了一个黑色方框（我想要的方式）的标题，但黑色方框（宽度为70％）带有文字似乎被粘在图像的左边。

        <div class="row">
                    <div class="text-center" style="position: relative">
                        <img src="http://i.imgur.com/84AfU5A.jpg" alt="" class="img-responsive center-block" style="border-radius: 25px; ">
                            <div class="caption" style="position: absolute; top: 55%; width:70%; background-color: black; opacity: 0.5">
                      <p style="color: white !important; opacity: 1 !important">“Text Text Text Text</p>
                </div>
         </div>
</div>

道歉，如果这是一个非常明显的修复。

Answer 1

只需将左侧css属性添加到标题div中即可。在下面的示例中，我添加了左：5％;

<div class="row">
  <div class="text-center" style="position: relative">
    <img src="http://i.imgur.com/84AfU5A.jpg" alt="" class="img-responsive center-block" style="border-radius: 25px; ">
    <div class="caption" style="position: absolute; top: 55%; left:5%; width:70%; background-color: black; opacity: 0.5">
      <p style="color: white !important; opacity: 1 !important">“Text Text Text Text</p>
    </div>
  </div>
</div>

Bootstrap：粘贴在左侧的图像上的文本覆盖

1 个答案: