Question

我在一个div中创建了5个跨度，并希望为该div保留一个背景图像。

背景图片未正确显示，下面是我的代码：

HTML

<body>
    <div class="mainDiv">
        <span id="intro">Introduction<br>to APO MF</span>
        <span id="apo">APO<br>Diagnostic</span>
        <span id="result">Result of<br>CMP and<br>Maturity</span>
        <span id="discussion">Discussion<br>with CSL</span>
        <span id="annual">Annual<br>improvement<br>plan</span>
    </div>
</body>

CSS

div{
    width: 80%;
    background-image:url("http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");
}
span{
    display: inline-block;
    padding: 20px;
    color: #ffffff;
    border-radius: 10px;
    vertical-align:top;
    height:80px;
    text-align:center;
    width:100px;
    padding-top:30px;
    font-size: 18px;
}
#intro{
    background-color: #C0504D;
}
#apo{
    background-color: #9BBB59;
}
#result{
    background-color: #8064A2;
}
#discussion{
    background-color: #4BACC6;
}
#annual{
    background-color: #F79646;
}

Answer 1

您可以将background-size: cover;添加到div样式，image宽度将适合div宽度。

同时添加background-repeat: no-repeat;和background-position: center;到中心位置，避免重复：

div{
    width: 80%;
    background-image: url("http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

DEMO

希望这是你所期望的。

Answer 2

你可以这样试试 background-image：url（＆＃34; ../ http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG＆＃34;）;

或 background-image：url（＆＃34; ./ http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG＆＃34;）;

Answer 3

将div标签的css更改为


    div {
    width: 80%;
    overflow: hidden;
    background-image:url("http://author.confirmit.com/isa/EXMRFPJVOQHBOHMKEYPPDKDXOPCQIXPY/APO%20Diagnostic%20survey-VL/background.PNG");
    background-size: 100% 100%;
}

背景图像不工作CSS

3 个答案: