Html 是否可以在每个li元素上隐藏ul背景图像？

为了制作如下的时间线，我创建了一个带有背景图像的

ul

元素，并给每个

li

元素一个背景色

源代码如下：

<style>
body{
    //background: url(http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg)
}
ul {
    background-image: url("http://i.imgur.com/AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-color: white;
}
</style>


<ul>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
    <li><span>20130307</span></li>
</ul>

<style>
body{
    background: url(http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg)
}
ul {
    background-image: url("http://i.imgur.com/AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-color: transparent;
}
</style>

我想问的是，有没有可能做出下面这样的事情？

---

谢谢你回答你原来的问题：不，不行。我要做的是稍微重新排列html：

<ul>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
<li><span></span>20130307</li>
</ul>

---

如果你愿意改变html结构，你可以尝试以下方法：

li的变化：

20130307

body{
    background: url(http://ut-images.s3.amazonaws.com/wp-content/uploads/2010/02/The-Brightest-of-Stars.jpg)
}
ul {


    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;



}
span {
   background-color: transparent;
    background-image: url("http://i.imgur.com/AmIstws.gif");
    background-position: 0 13px;
    background-repeat: repeat-x;

    display: block;
    float: left;
    height: 20px;
    width: 31px;
}
div {
    float:left;
    }

嗯，这似乎很难。
我会说这是不可能的，但我们当然可以尝试实现某种错觉。
我的第一个想法是去掉
，玩弄：after和：before伪元素

我会在每个li后面加一条直线

li:after{
   background: white;
   content: "";
   width: 30px;
   height: 2px;
   top: 13px;
   right: -16px;
   position: absolute;
}

一个在第一个之前

 li:first-child:before{
    background: white;
    content: "";
    width: 30px;
    height: 2px;
    top: 13px;
    left: -16px;
    position: absolute; 
}

看

还是有点像黑客，但效果不错。没有额外的标记（您甚至可以删除所有的span标记），语义保留。
使用
背景：透明
不可能做到这一点。如果某物是透明的，则其下方的所有级别都可见，包括
上的背景线

如果您可以使用
固定的
背景，就可以在不更改HTML的情况下实现这种效果。您只需为
主体
和
span
指定相同的背景，每个主体都有一个固定的
。使用
fixed
将使两个背景对齐，看起来像是同一背景的一部分

<style>
body{
    background-image: url("The-Brightest-of-Stars.jpg");
    background-attachment: fixed;
    background-color: #001;
}
ul {
    background-image: url("AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-image: url("The-Brightest-of-Stars.jpg");
    background-attachment: fixed;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: #001;
}
</style>


身体{
背景图片：url（“最亮的星星.jpg”）；
背景附件：固定；
背景色：#001；
}
保险商实验室{
背景图片：url（“AmIstws.gif”）；
背景位置：0 14px；
背景重复：重复-x；
高度：30px；
溢出：隐藏；
位置：相对位置；
}
李{
字体大小：16px；
高度：30px；
线高：28px；
文本对齐：居中；
宽度：100px；
列表样式：无外无；
浮动：左；
}
跨度{
背景图片：url（“最亮的星星.jpg”）；
背景附件：固定；
颜色：#fff；
文本阴影：1px 1px 1px#000；
背景色：#001；
}

正如我对这个问题的评论，您可能希望对文本稍加修改以提高可读性。上述CSS包括文本
颜色
、
文本阴影
和
背景色
因此。
以下是我的解决方案：
制作另一个元素并将该背景设置为该元素背景，将其插入跨度和周围

这是一个简单的技巧和工作，只需要对css进行一些调整

css:
ulli small{背景：#CC0000；宽度：100px；高度：20px；浮点：左；}
ul li:第一个子{宽度：200px；}
李：第一个小孩{背景：#CC0000；宽度：200px；}
ul li：最后一个孩子小{宽度：200px；}
ul li:最后一个小孩{背景：#CC0000；宽度：200px；}

html:


20130307

20130307

20130307

20130307


查看小提琴：
嘿，你也对html的更改持开放态度吗？这种背景使得文本非常难以阅读。我会使用更明亮的颜色，可能是白色，然后添加一点阴影，以确保当它与背景的较亮部分重叠时可读。如果这样做，请确保也指定背景颜色，以便在图像加载速度慢/加载失败时仍然可读。另外，
/
在CSS中不做注释，它只支持
/***/
风格的注释。@SachinRawal是的，欢迎检查我发布的答案
<style>
body{
    background-image: url("The-Brightest-of-Stars.jpg");
    background-attachment: fixed;
    background-color: #001;
}
ul {
    background-image: url("AmIstws.gif");
    background-position: 0 14px;
    background-repeat: repeat-x;
    height: 30px;
    overflow: hidden;
    position: relative;
}
li {
  font-size: 16px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 100px;
  list-style: none outside none;
  float: left;
}
span {
    background-image: url("The-Brightest-of-Stars.jpg");
    background-attachment: fixed;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: #001;
}
</style>