html - 没有其他元素会出现在我的带有彩色背景的部分元素中

Question

我创建了一个 < section >背景颜色为 #ff6952
我希望我可以放一张图片(在 Sketch 中创建)，这是一家名为 LookOut Software 的软件公司的时间表。

我无法在 < section > 中在该背景色之上显示任何内容| .我尝试插入 img部分中的标记和图像不显示。然后我尝试使用没有列表样式的无序列表重新创建时间线，列表元素像导航菜单一样内联显示。似乎什么都没有出现。请注意，时间线应该是白色的。

这是 HTML:

<section id="timeline">
    <ul>
        <li>
            1994 - Client Connect Plus is founded.
        </li>
        <li>
            1997 - Client Connect Plus becomes LookOut Software.
        </li>
        <li>
            2001 - We launched our first product. Lots of anticipation.
        </li>
        <li>
            2006 - Big success with new product. Everybody smiles.
        </li>
        <li>
            2010 - We had some tough times but we survived them.
        </li>
        <li>
            2013 - Things started looking better. Brighter days.
        </li>
        <li>
            2015 - SharePoint CRM Template becomes SharePoint Flex.
        </li>
        <li>
            2016 - ?
        </li>
    </ul>
</section>

和CSS:

#timeline{
height: 700px;
width: 100%;
background: #ff6952;
}

#timeline ul li{
color: white;
z-index: 100;
}

我已经尝试过多种不同的 CSS 样式，但我认为在这里列出所有这些都是徒劳的。感谢您的帮助。

Answer 1

使用此代码段在颜色上方显示您的图像:

background-image:url(http://www.wwwsitus.com/support/img/ampproject.png);
background-position:center;
background-repeat:no-repeat;

并将其放置在您的时间轴中，如下所示:

#timeline{
height: 700px;
width: 100%;
background: #ff6952;
/*start: adding image*/
background-image:url(http://www.wwwsitus.com/support/img/ampproject.png);
background-position:center;
background-repeat:no-repeat;
/*end: adding image*/
}

检查 Jsfiddle Demo here .顺便说一句，我使用图像位置作为 center。您可以为此设置自由(center、right、left 或 bottom)。