图片上的文字 - 响应式 [英] Text over image - responsive

问题描述

这是我的第一个问题……我必须这样做:

但我搜索了很多，但对我没有任何作用，我的 html 和 css 中有这样的东西

.thumbnail {位置:相对；底边距:0；边框:0；边框颜色:透明；}.标题 {位置:绝对；顶部:40%；左:0；宽度:100%；}

 
<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>[e-mail]</p><p>[phone] |[phone]</p><p>El Aguilucho 3174, 普罗维登西亚, 大都会区</p>

那行得通，但是当我使用 chrome 的响应模式时，文本会离开图像

(对不起我的英语，我说西班牙语)

解决方案

img {显示:块；}.缩略图{位置:相对；显示:内联块；}.标题 {位置:绝对；顶部:50%；左:50%；变换:翻译(-50%，-50%)；文本对齐:居中；白颜色;字体粗细:粗体；}

<div class="缩略图"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""><div class="caption"><p>[e-mail]</p><p>[phone] |[phone]</p><p>El Aguilucho 3174, 普罗维登西亚, 大都会区</p>

this is my first question soo... i have to do someting like this:

but i search a lot and nothing work for me, i had something like this in my html and 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>[e-mail]</p>
              <p>[phone]   |   [phone]</p>
              <p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
          </div>
      </div>
  </div>

that work, but when i use the responsive mode from chrome, the text leave the image

(sorry for my english, i speak spanish)

解决方案

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>[e-mail]</p>
              <p>[phone]   |   [phone]</p>
              <p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
          </div>
      </div>
  </div>

这篇关于图片上的文字 - 响应式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！