html - 是否可以在每个 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>我的第一个想法是用 :after 和 :before 伪元素摆脱and 玩具。

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

仍然有点黑客，但它工作正常。没有额外的标记（您甚至可以删除所有跨度标签），并且保留了语义。

Answer 4

用 是不可能做到这一点的background: transparent。如果某物是透明的，则它下面的所有级别都是可见的，包括<ul>.

fixed如果您可以使用背景，您可以在不更改 HTML 的情况下实现该效果。您只需为bodyand指定相同的背景span，每个都带有background-attachmentof 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 包含一个 textcolor和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>

看看小提琴：小提琴