是否可以隱藏每個li元素上的ul背景圖像？

爲了製作如下的時間線，我創建了一個帶有背景圖像的ul元素，併爲每個li元素指定背景顏色。是否可以隱藏每個li元素上的ul背景圖像？

enter image description here

如下的源代碼：

<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元件。

enter image description here

的源代碼如下：

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

我想問的是有可能使類似下面？ enter image description here

感謝

來源

2013-03-07 Charles Yeung

哎你在HTML打開變化以及？ – supersaiyan 2013-03-07 10:31:00

背景使得文字難以閱讀。我會使用較亮的顏色，也許是白色，然後添加一點陰影以確保它在與背景的較亮部分重疊時可讀。如果你這樣做，一定要指定背景顏色，以便在圖像加載緩慢或無法加載時仍可讀。另外，'//'不會在CSS中做出評論，它只支持'/ * * /'樣式註釋。 – 2013-03-07 10:31:40

@SachinRawal是的，歡迎 – 2013-03-07 10:35:02

你可以試試這個，如果你是開放在HTML結構變化：

http://jsfiddle.net/MBNZ8/

變化李：<li><div>20130307</div></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; 
    }

來源

2013-03-07 10:36:18 supersaiyan

在回答你原來的問題：不，它不能做。我會做的是重新排列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; 
}

你不得不更動邊緣等，以得到完美

來源

2013-03-07 10:32:45

嗯，這似乎相當困難。我會說這是不可能的，但我們當然可以嘗試實現一種錯覺。我的第一個想法是擺脫<hr>，並在僞元素之前和之後玩弄。

我想每個L1

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標籤），並保留語義。

來源

2013-03-07 10:51:10 Nobita

這是不可能與background: transparent做到這一點。如果某物是透明的，則其下方的所有級別都可見，包括<ul>上的背景線。

可以達到這樣的效果，而無需改變你的HTML，如果你是好與使用fixed背景。您只需指定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 。

來源

2013-03-07 11:01:41

這裏是我的解決方案：再拍元素，並設置背景爲這個元素的背景，跨度和周圍之間插入。

它是一個簡單的技巧和工作，只是需要的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></li> <li>20130307</li> <li></li> <li>20130307</li> <li></li> <li>20130307</li> <li></li> <li>20130307</li> <li></li> </ul>

退房小提琴：fiddle

來源

2013-03-07 11:24:51 Toping

是否可以隱藏每個li元素上的ul背景圖像？

回答

相關問題