Question

我做了一个简单的布局，但是自从我编码以来已经好几年了，我在定位和移动滚动框时遇到了问题，无法与我在此图片上创建的文本框区域对齐。

这是我到目前为止的编码。绝对缺少一些东西......

＆＃13;

<center>
<div class="img">
    <div class="scroll">
      <a>
         text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here 
      </a>
    </div>
</div>
<style>
   .img{
  background-image: url(http://i65.tinypic.com/4janew.jpg);
  background-size: 100% 100%;
  width: 930px;
  height: 634px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
}


.scroll{
  height: 50%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a{
position: relative;
bottom: -400px;
  font-size: 14px;
  color: #BBA894;
  font-family: Times New Roman;
}
</style></center>

＆＃13;

Answer 1

好的，我还有点不清楚，但这就是我所拥有的：

.img{
  background-image: url(http://i65.tinypic.com/4janew.jpg);
  background-size: 100% 100%;
  width: 930px;
  height: 634px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
    position: relative;
}


.scroll{
    position: relative;
  height: 50%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a {
    position: absolute;
    left: 100px;
    right: 100px;
    bottom: 250px;
  font-size: 14px;
  color: #BBA894;
  font-family: Times New Roman;
}

由于图片包含该框，因此您需要做的就是将文字放在内部，就像我在以下所做：

https://jsfiddle.net/L2saoou8/

如果你想要它滚动，那么只需在文本的包含框中添加一个高度，.scroll然后溢出：auto。

Answer 2

不确定这是否是你想要的，但尝试添加

填充顶部：30％;

到.scroll {}的CSS。

所以看起来像这样：

.scroll {
height: 50%;
width: 100%;
overflow-y: auto;
padding-right: 25%;
padding-top: 30%;
}

虽然我不推荐这种方式，因为这不是响应式设计。具有特定于区域的文本的背景图像将不会在诸如从桌面到平板电脑到移动等的平台上做出良好响应。我建议您从图像中移除该矩形框并将其作为具有该背景颜色的div进行处理。框中的颜色具有透明度，并将其放置在图像上，就像那个div中的滚动div一样。谢谢！希望它有所帮助。

将滚动框向下移动到文本框区域？

2 个答案: