我有以下代码显示SPAN里面一个DIV然后另一个DIV在它下面显示一些文本。我遇到的问题是当我调整浏览器大小时，文本和背景图像变得不合适。
这是图像未填满的屏幕截图DIV:
另外，当我调整大小时，文本全部错位：
这是 HTML：
<div id="subpageHeaderImageSection">
<div id="subpageHeaderLeft">
<!--<img src="theImages/wcu.png" style="z-index: 5; position: absolute; bottom: 0; left: 10%; width: 194px; width: 185px;" />
<span id="quoteText" style="z-index: 4;">
We Have the Finest Physicians, Staff, and Systems for the Finest Healthcare
</span>-->
</div>
</div>
<div id="subpageFooter">
<div id="subpageFooterLeft">
<div style="z-index: 15; position: absolute; left: 0; padding-left: 20px; padding-top: 10px; font-weight: bold; color: #0000CC;">
State-Of-The-Art-Technology
</div>
<div style="z-index: 14; position: absolute; left: 0; padding-left: 40px; padding-top: 35px; padding-right: 8px; font-weight: normal; color: #000000;">
Our state-of-the-art technology ensures that we provide the finest healthcare. Our practice continuously invests in systems and equipment so that physicians can diagnose problems in the most accurate and efficient manner possible.
</div>
<div style="position: absolute; width: 90%; padding-top: 90px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 13; position: absolute; left: 0; padding-left: 20px; padding-top: 110px; font-weight: bold; color: #0000CC;">
Advanced Electronic Medical Records
</div>
<div style="z-index: 12; position: absolute; left: 0; padding-left: 40px; padding-top: 135px; padding-right: 8px; font-weight: normal; color: #000000;">
Our advanced electronic medical record improves patient care and gives physicians all of the important patient information they need in one place.
</div>
<div style="position: absolute; width: 90%; padding-top: 175px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 11; position: absolute; left: 0; padding-left: 20px; padding-top: 200px; font-weight: bold; color: #0000CC;">
Premier Radiology Services
</div>
<div style="z-index: 10; position: absolute; left: 0; padding-left: 40px; padding-top: 225px; padding-right: 8px; font-weight: normal; color: #000000;">
Filmless radiology capabilities provide rapid results and allow physicians to view images on an office computer screen within minutes. Our premier radiology services include MRI, CT scan, ultrasonography, nuclear medicine, bone densitometry and mammography. We offer computer-aided diagnosis (CAD), which is a tool to assist the radiologist in more accurately diagnosing breast disease.
</div>
<div style="position: absolute; width: 90%; padding-top: 310px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 9; position: absolute; left: 0; padding-left: 20px; padding-top: 335px; font-weight: bold; color: #0000CC;">
Our Employees Make MyMed a Special Place
</div>
<div style="z-index: 8; position: absolute; left: 0; padding-left: 40px; padding-top: 360px; padding-right: 8px; font-weight: normal; color: #000000;">
MyMed values each of our employees’ experience, diversity and dedication. Ideas and backgrounds that our employees bring to our company enable us to be more effective in anticipating and exceeding our patients’ needs and expectations. <a class="blueLinks" href="http://www.mymed.com/talented_people.aspx">Click here</a> for the opportunity to meet some of the employees who greatly contribute to our success.
</div>
<div style="position: absolute; width: 90%; padding-top: 430px; padding-left: 5%; padding-right: 5%;"><hr /></div>
<div style="z-index: 7; position: absolute; left: 0; padding-left: 20px; padding-top: 455px; font-weight: bold; color: #0000CC;">
Wide Range Of Insurances
</div>
<div style="z-index: 6; position: absolute; left: 0; padding-left: 40px; padding-top: 480px; padding-right: 8px; font-weight: normal; color: #000000;">
A big advantage to using WESTMED Medical Group is the <a class="blueLinks" href="http://www.mymed.com/participating_insurance.aspx?id=473">wide range of insurance coverage</a> accepted. This means you should be able to keep your doctors even if you find you have to change insurance plans. We care equally about every patient regardless of the insurance provider.
</div>
</div>
<div id="subpageFooterRight">
</div>
</div>
这是CSS：
#subpageHeaderImageSection {
position: relative;
top: 0;
width: 100%;
height: 450px;
}
#subpageHeaderLeft {
position: absolute;
left: 0;
float: left;
width: 100%;
height: 100%;
background: url('../theImages/subpageHeaderImage.png') no-repeat;
background-size: 100%;
}
#subpageFooter {
position: relative;
width: 100%;
height: 555px;
background: url('../theImages/bg_80_w.png');
box-shadow: 0 0 10px #FFFFFF;
}
#subpageFooterRight {
position: absolute;
right: 0;
width: 40%;
height: 100%;
float: right;
background-color: #000000;
}
#subpageFooterLeft {
position: absolute;
left: 0;
float: left;
width: 60%;
height: 100%;
}
#quoteText {
position: absolute;
bottom: 30%;
left: 40%;
overflow: hidden;
font-family: 'daysregular';
font-size: 30pt;
}
我非常希望得到帮助的两件事：
- 如何确保无论我如何调整大小，标题上的背景图像始终填满 DIV？
- 如何确保文本不会像第二张图片中那样相互重叠？
Use background-size: 100% 100%完全填充（可能被拉伸）
其他明智的使用background-size: cover正如@Andras所说
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
