Click here for photo of the text overrunning the picture我有一个带有背景图片的文本框，因为我会适当调整图片大小（使用百分比），但文本框溢出。我正在使用CSS中的溢出功能，但我需要文本框来调整它的长度，因为它用完房间，以便图片留在后面。有任何想法吗？提前谢谢。
P.S。任何更优雅的解决方案，以取代使用CSS溢出功能欢迎！
P.P.S。我目前正在研究jquery函数“resize”，我认为解决方案可能是将文本框链接到此函数。
HTML代码如下
<main id="about">
<img src="images/Lace Eckhardt 1425.jpg" alt="" id="laceBike">
<section class="lace">
<h2>About Lace</h2>
<div id="aboutText">
<p>Lace Eckhardt has never done things by halves and her latest venture Sidekicks is certainly no exception. Eckhardt, 31 leads a dynamic life, a self-confessed ‘kidult’ she can be found on her BMX heading for an early morning surf, or practicing her skate tricks on the custom half pipe built in her garden.</p>
<p>Having spent half her life trashing numerous pairs of shoes she started to take the search for sturdy, well-made kicks seriously. “I spent so much time on-line looking for stylish skate shoes but most of what I found were either poorly made or way too commercial. When I did find a style that suited my lifestyle and my taste I’d tell everyone how great they were…then someone suggested I set up a shop. I listened, and the rest is history!” </p>
<p>Starting off with twenty of her top styles, Eckhardt set up a successful eBay shop and is now launching this new site Sidekicks, concentrating predominantly on her six feature shoes. “I have so much faith in the brands and styles I’m selling, as long as I have one of each of them in my wardrobe I honestly don’t need anything else. Although new colours and fabrics are released every season and I’m a sucker for those.” Eckhart has some loyal customers who won’t buy their shoes anywhere else. “One guy in Ecuador bought his first pair from me just a month after I’d set up the eBay store and now owns at least one of each style. He sends me photos of him when he gets a new pair, I love seeing my customers wearing my shoes and doing what they love. It’s like a cool little like-minded community…one of my long standing customers even sent me a skateboard she’d designed, how awesome is that?!’</p>
</div>
</section>
</main>
当前相关CSS
main {
width: 100%;
margin-left: auto;
margin-right: auto;
clear: both;
}
.lace {
position: absolute;
width: 500px;
margin-left: 22px;
float: left;
background-color: rgba(248,246,246,0.50);
margin-top: -79%;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
overflow: auto;
margin-bottom: 20px;
}
#aboutText {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 20px;
color: rgba(75,1,3,1.00);
}
#laceBike {
position: relative;
margin-top: 0px;
width: 100%;
}
答案 0 :(得分：0)
使用VH或VW单位来调整该框和字体的大小。请参阅此处示例https://jsfiddle.net/5rkxkq62/
VH或VW单位在0-100范围内，代表VIEWPORT HEIGHT / WIDTH。如果仅对尺寸（宽度和高度）使用一个单位，则可以保持尺寸比率始终相同
但我建议复制它并在普通的html页面中尝试它，因为在jsfiddle你不能很好地调整窗口大小，并且vh和VW单元在该输出框架中没有正确的行为。
<div class="box">
<div class="text">
Lorem ipsum dolor sit amet......
</div>
</div>
.box{width:80vh; height:50vh; position:relative; margin:auto;
background:url("http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg"); background-size:100% auto;}
.text{background: rgba(255,255,255,.3); color:white; font-size:5vh; position:absolute; top:10px; left:10px; height:40%; width:calc(100% - 20px);}
答案 1 :(得分：0)
您好我找到了一个完整的解决方案，将图片作为背景图片发布，然后使用百分比，媒体查询和溢出：滚动;在CSS。
@charset "UTF-8";
/* CSS Document */
@media (max-width: 1500px){
#main {
background-image: url(images/Unknown.jpeg);
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
height: 100vh;
margin-left: auto;
}
#text {
width: 55%;
margin-left: auto;
margin-right: 1%;
float: right;
overflow: scroll;
height: 483px;
background-color: rgba(233,226,227,0.50);
padding-left: 13px;
padding-top: 13px;
padding-right: 13px;
padding-bottom: 13px;
text-align: center;
font-size: 19px;
}
h1 {
width: 50%;
margin-left: auto;
margin-right: 4.5%;
text-align: center;
float: right;
}
}
@media (max-width: 980px){
#text {
height: 300px;
}
}
@media (max-width: 700px){
#text {
height: 108px;
font-size: 18px;
}
}
@media (max-width: 470px){
h1 {
font-size: 20px;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Contained To Pic</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main">
<h1>Where is the Picture in the Background?</h1>
<div id="text">
<p>Lorem ipsum dolor sit amet, posse nusquam ne vix, justo sensibus at has. Ius dicat congue doctus id. Vim ornatus antiopam ea, ea sensibus accusamus mediocritatem has. Ne mollis ullamcorper voluptatibus eos, eum choro virtute facilis eu, cum iusto oratio democritum ad. Pri tacimates adolescens ei, eum augue suscipit interesset an.</p>
<p>Mei ea clita nullam, ea nullam deserunt vulputate cum, tale invidunt eam id. Vidisse honestatis ius ad, in duo facilis definitionem, ea nec equidem sanctus petentium. Mea te evertitur consequuntur. Ex his justo dignissim definitionem, est mutat consequat te, ne dicunt prodesset vix. Percipit electram rationibus ius cu, audire dolorum veritus eu eam.</p>
<p>Lorem imperdiet constituto eu est. No usu quis fabulas verterem. Eirmod volumus electram qui id. Porro oratio at pro, illud sententiae omittantur eum ut. An qui vide summo, vis ex animal impetus. Deserunt sensibus definitionem at eam, in nam hinc rebum dolores.</p>
<p>Te omnis denique probatus est, ex pri justo melius incorrupte. Ex posse euripidis has, nec no vidit invenire. Nam cu hinc possit omnium. Ei clita perpetua pertinacia has, ad eum modo saperet appellantur. Assum adipisci in eum, an clita animal vis, vis id postulant consulatu. Pri eu exerci detracto iudicabit.</p>
<p>Te velit posidonium sed, libris postea per ut. Democritum abhorreant appellantur ad nec, periculis torquatos consetetur pro te. Ex vis tritani alterum rationibus. Sea ex feugiat constituto dissentiet. Sapientem voluptatibus ad his, vix cibo accusam ei.</p>
</div>
</div>
</body>
</html>
This is just a random image I pulled in from the web for the example.
因此，如果将所有这些放在一起，您将拥有一个包含背景图像中文本的网站。我希望这有帮助，快乐的编码！
