为啥背景图片没有填满整个div

Posted 2023-03-06

【中文标题】为啥背景图片没有填满整个div

【英文标题】：Why the background image does not fill the entire div为什么背景图片没有填满整个div

【发布时间】：2014-04-15 09:17:01

【问题描述】：

我有以下代码，它在DIV 内显示一个SPAN，然后在它下面显示另一个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？ 如何确保文本不会像第二张图片中那样相互重叠？

【问题讨论】：

请创建 jsfiddle/jsbin 示例 :)

JSFiddle: jsfiddle.net/58AZ7 （图像问题已修复，但如果未将大小调整为 100%，文本会重叠）我该如何解决？

【参考方案1】：

使用background-size: 100% 100% 完全填充（可能被拉伸） 其他明智的使用background-size: cover @Andras 说

【讨论】：

是的 100% 100% 工作，但图像现在被拉伸但没关系！从第二张图片中，我如何使它显示在前一张图片下方，就像它显示在常规页面中一样，并且无论我调整多少大小它总是保持不变？

JSFiddle: jsfiddle.net/58AZ7 （图像问题已修复，但如果未将大小调整为 100%，文本会重叠）我该如何解决？

由于某种原因，100% 100% 在 IE8 中不起作用。图像从 DIV 中拉伸出来：/

【参考方案2】：

使用background-size:cover，它会填满。

【讨论】：

background-size: cover 会填满整个 DIV，但在调整浏览器大小时不会调整大小。

我实际上必须在值中使用100% 100%，它工作正常！ :) 无论如何谢谢你...