响应 - 图象上的文本 [英] Responsive - text on image

问题描述

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

我的图片：

  .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> 
  

我应该做什么让文字始终在正确的地方

nofollow> 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; 
} 
  

I have problem with responsive design. I try to display text over the box in image, but when I resize browser text is outside the box.

My picture:

.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 code:

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

What I should do to have text always in right place over image?

解决方案

Try this 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;
}

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