web-dev-qa-db-ja.com

画像上のテキスト-レスポンシブ

これは私の最初の質問です...私はこのようなことをしなければなりません：

enter image description here

しかし、私はたくさん検索して何もうまくいきません、私のhtmlとcssにこのようなものがありました

.thumbnail {
    position: relative;
    margin-bottom: 0;
    border: 0;
    border-color: transparent;
}

.caption {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
}
  <div id="box-search">
      <div class="thumbnail text-center">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
          <div class="caption">
              <p>[email protected]</p>
              <p>+56983874071   |   +56228231294</p>
              <p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
          </div>
      </div>
  </div>

それは機能しますが、クロムからレスポンシブモードを使用すると、テキストが画像を残します

（英語で申し訳ありませんが、スペイン語を話します）

htmltwitter-bootstrapcssangular-ui-bootstrap
8
Javier Gonzalez
img {
    display: block;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: white;
    font-weight: bold;
}
<div id="box-search">
      <div class="thumbnail">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
          <div class="caption">
              <p>[email protected]</p>
              <p>+56983874071   |   +56228231294</p>
              <p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
          </div>
      </div>
  </div>
16
hungerstar