我正在尝试使用应用于列表项的背景图像生成流程图。
应用于列表项的background-image
在IE11中不可见(所有版本IE10,9等)。
CSS代码
body{padding: 50px 0;}
.status-line {
width: 80%;
margin: 0 auto 3%;
}
.status-line ul li {
text-align: center;
width: 25%;
background-image: url("../images/middleCircle.png");
background-size: 190px;
background-repeat: no-repeat;
float: left;
}
.status-line ul li:first-child {
background-image: url("../images/first-circle.png");
}
.status-line ul li:last-child {
background-image: url("../images/endcircle.png");
background-size: 34px;
}
.status-line span {
padding: 7px 0 2px 0;
width: 24px;
text-align: center;
border-radius: 50%;
margin: 3px 0 0 8px;
color: rgb(153,153,153);
font-size: 12px;
display: inherit;
}
.status-line #step3{
/*font-size: 14px;*/
padding: 7px 0 5px;
text-align: center;
width: 24px;
}
.status-line ul li:first-child span {
margin-left: 3px;
}
.status-line ul li .process-done {
padding: 20px 0 4px 0;
background: #0abc70 url("../images/tick-mark.png");
background-size: 12px;
background-repeat: no-repeat;
background-position: 50%;
}
.status-line ul li .processing {
background: #5776e3;
color: #ffffff;
}
HTML CODE:
<ul class="cf">
<li><span id="step1" class="process-done"></span><h1>Application<br> Received</h1>
</li>
<li>
<span id="step2" class="process-done"></span><h1>Requirements<br> Received & Reviewed</h1>
</li>
<li>
<span id="step3" class="processing">
3
</span><h1>Offer</h1>
</li>
<li>
<span id="step4">
4
</span><h1>Offer <br> Accepted</h1>
</li>
</ul>
我附上了IE,chrome,firefox中可见的截图。
任何帮助将不胜感激
答案 0 :(得分:0)
检查您的IE设置是否设置为显示图片。
要调整Internet Explorer以便显示图像,请执行以下操作:
打开Internet Explorer。
单击“工具”菜单,然后单击“Internet选项”。
单击“高级”选项卡。
向下滚动“设置”列表,直至看到“多媒体”。
确保选中了“显示图片”复选框。
单击“确定”,然后再次单击“确定”。