gpt4 book ai didi

html - 背景图像不工作 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 11:05:34 25 4
gpt4 key购买 nike

我在一个 div 中创建了 5 个跨度,并想为该 div 保留一张背景图像。

enter image description here

背景图片不正常,下面是我的代码:

JSFiddle link

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

最佳答案

您可以将 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

希望这是您所期望的。

关于html - 背景图像不工作 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33999056/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com