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

Question

为了制作如下所示的时间轴，我创建了一个带有背景图片的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>

但是，如果我将body设置为solid background color，则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: transparent;
}
</style>

我想问一下，可以制作类似下面的内容吗？

由于

Answer 1

回答你原来的问题：不能做到。我要做的是重新排列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>

将背景图像从UL中取出并应用于跨度，类似这样

span {
    background-image: url("http://i.imgur.com/AmIstws.gif");
    display: inline-block;
    height:10px;
    width:80px;
    margin:0 3px;
}

你必须弄清楚边缘等以使其完美

Answer 2

如果您愿意更改html结构，可以试试这个：

http://jsfiddle.net/MBNZ8/

li：<li><span></span><div>20130307</div><span></span></li>

中的更改

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

Answer 3

嗯，这似乎很难。 我会说这是不可能的，但我们当然可以尝试实现某种幻觉。 我的第一个想法是摆脱<hr>和玩具周围：之后和：伪元素之前。

我会在每个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; 
}

请参阅http://jsfiddle.net/gleezer/8SKXy/1/

仍然是一种黑客，但它确实有效。没有额外的标记（你甚至可以删除所有的span标签），并保留语义。

Answer 4

使用background: transparent无法执行此操作。如果某些内容是透明的，则可以看到其下方的所有级别，包括<ul>上的背景行。

如果您可以使用fixed背景，则可以在不更改HTML的情况下实现此效果。您只需为body和span指定相同的背景，每个背景都有background-attachment fixed。使用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>

正如我对此问题发表评论，您可能希望稍微更改一下文本以提高可读性。上述CSS包含文字color，text-shadow和background-color 出于这个原因。

Answer 5

这是我的解决方案： 制作另一个元素并将该背景设置为此元素背景，将其插入跨度和周围。

这是一个简单的技巧，只需要对CSS进行一些调整。

css：ul li small { background: #CC0000; width: 100px; height: 20px; float: left; } ul li:first-child { width: 200px; } ul li:first-child small { background: #CC0000; width: 200px; } ul li:last-child small { width: 200px; } ul li:last-child small { background: #CC0000; width: 200px; }

html：<ul> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> <li><span>20130307</span></li> <li><small></small></li> </ul>

查看小提琴：fiddle