html - 将文字放在图片上以适应响应页面

Question

我试图在图片上放置一些文字，但我不想设置 background-image。

我创建了一个 jsfiddle为了说明我做了什么，我使用了 bootstrap3。

在移动尺寸下，可以正常显示

但是如果我调整浏览器宽度，它就会坏掉。

html

<div class="col-xs-12 visible-sm-block visible-xs-block" style="text-align: center;">
    <p class="competion_text">
        This is inside the competiontion Box!
        <br> Second line
        <br> Third line
    </p>
    <img src="http://i.imgur.com/NajXOdH.png">
</div>

CSS

.competion_text {
        text-align: center;
        position: relative;
        top: 252px;
        left: 7px;
        max-width: 225px;
        color: #FFCF83;
        font-size: 10pt;
    }

Answer 1

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.holder {
  position: relative;
  width: 230px;
  margin: 0 auto;
}

.competion_text {
  position: absolute;
  top: 180px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #FFCF83;
  font-size: 10pt;
  z-index: 2;
}

<div class="col-xs-12 visible-sm-block visible-xs-block holder" style="text-align: center;">
        <p class="competion_text">
            This is inside the competiontion Box!
            <br> Second line
            <br> Third line
        </p>
        <img src="http://i.imgur.com/NajXOdH.png">
    </div>

我在父类上放了另一个类。 (.holder)

试试这个。希望对您有所帮助!