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

我做了一个简单的布局，但已经过了多年，因为我已经编码，并且在定位和移动滚动框时遇到了问题，无法与我在此图像上创建的文本框区域对齐。将滚动框向下移动到文本框区域？

这是我到目前为止的编码。肯定失去了一些东西......

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

来源

2017-08-25 Connie

你是什么意思的滚动框和文本框？期望的结果应该是什么样子？此外，'

'元素不再存在。 – j08691

对不起，很生锈！如果您在整个页面上运行代码段，您可以看到在“Alma's”名称下面的布局底部，我为我想定位滚动框的位置创建了一个矩形空间。但正如您所看到的，滚动框/文本位于布局图像的中心，而不是底部的矩形区域。不知道我错过了什么，或者我需要拿出什么，因为我多年没有编码。 – Connie

另外，中心元素用于将整个图像定位在网站上。 – Connie

好吧，我有点不清楚的是，但这里是我有：

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

来源

2017-08-25 20:14:30 stevelacerda7

明白了。谢谢你的帮助！ – Connie

不知道这是你想要的，但尝试加入

padding-top：30％;

到.scroll {}的CSS。

因此，使它看起来像这样：

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

虽然我不推荐这种方式，因为这不是响应式设计。像背景图像这样的文字特定区域将不会响应平台，如从桌面到平板电脑到移动等。我建议您从图像中删除该矩形框，并将其作为一个背景颜色的div盒子的颜色与透明度并将其放置在图像上，就像该div内的滚动div一样。谢谢！希望它有帮助。

来源

2017-08-25 20:16:36

这是一个很好的建议，感谢您的帮助！ – Connie

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

回答

相关问题