我对响应式设计有疑问。我尝试在图像中的框上方显示文本,但是当我调整浏览器大小时,文本在框外。
我的照片:
.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>
我应该怎么做才能使文本始终位于图像上方的正确位置?
最佳答案
试试这个 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;
}
关于html - 响应式 - 图片上的文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30120746/