响应式 - 图像上的文字答案

【问题标题】：Responsive - text on image响应式 - 图像上的文字
【发布时间】：2015-05-08 18:08:13
【问题描述】：

我对响应式设计有疑问。我尝试在图像中的框上显示文本，但是当我调整浏览器大小时，文本在框外。

我的照片：

.row6 {
  background: none;
  width: 100%;
  height: 130px;
  border: 0px salmon dotted;
  font: bold 1.7vw arial, sans-serif;
  margin: 20px auto;
}

.row6 > div {
  position: relative;
  top: 8px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url(images/background.png) no-repeat;
  background-size: 100%
}

#dd7 {
  margin-left:44.7%;
  width:45px;
  text-align:center; 
  padding-top:0.7%
}

HTML 代码：

<div class="row6">
  <div>
    <div>
      <div id="dd7">TEXT</div>
    </div>               
  </div>
</div>

我应该怎么做才能使文本始终位于图像上方的正确位置？

【问题讨论】：

将背景图片放在包含文本的div上（#dd7）。
但是我有一个大图像，文本位置很小，那个地方（白框）必须在图像的正确部分。这就是为什么带有文本的 div 在带有图像背景的 div 中的原因。
你能在 jsfiddle 这样的网站上发布你的代码演示吗？
jsfiddle.net/pnzLn2no
当您调整浏览器的大小时，文本在框外

标签： html css responsive-design

【解决方案1】：

试试这个fiddle

.row6 {
  background: none;
  width: 100%;
  height: 130px;
  border: 0px salmon dotted;
  font: bold 1.7vw arial, sans-serif;
  margin: 20px auto;
}

.row6 > .bgImage {  
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url(http://i.stack.imgur.com/amwBH.png) no-repeat;
  background-size: 100%
}

#dd7 {
  margin-left:44.7%;
  margin-top: 1.2%;
  float: left;
}

【讨论】：

【解决方案2】：

问题是您的文本使用了固定宽度 (45px)。尝试使用百分比宽度：

#dd7{
...
width: 5%;
}

https://jsfiddle.net/pnzLn2no/1/

【讨论】：