在特定點後停止背景重複

有沒有辦法阻止背景圖像在特定（雖然動態）點之後重複？在特定點後停止背景重複

目前我有以下HTML

<ul> 
    <li>variable</li> 
    <li>amount</li> 
    <li>of</li> 
    <li>items</li> 
</ul>

和CSS：

ul { 
    background-image: url('./imgs/gridlines.png'); 
    background-repeat: y-repeat; 
}

現在，上面重複圖像的ul元件的整個長度。我的問題是我需要重複從ul的底部停止8px。

我試過使用background-position，但這只是改變了背景，而仍然重複到ul元素的末尾。

我也嘗試過使用background-size: 1 calc(100% - 8px);，但是這對於Chrome來說是失敗的。

fiddle

來源

2015-01-31 SReject

'margin-bottom：8px;'解決你的問題？ – lightandlight 2015-01-31 22:21:54

不，因爲我需要重複的背景，以停止大約1/2最後'li'元素的方式 – SReject 2015-01-31 22:23:51

您可以在CSS中做到這一點...排序的。您無法告知background-repeat重複指定的次數;它不以那種方式工作。所以我的想法是在列表的底部，這應該有所建樹非常接近預期的效果，堅持一個8像素的白色塊：

ul { 
 
    background-image: url('http://i.imgur.com/B5k8FTP.png'); 
 
    background-repeat: y-repeat; 
 
    padding-left:0; 
 
    color:black; 
 
    width:200px; 
 
    position:relative; 
 
} 
 
li:last-child{ 
 
    position:relative; 
 
    z-index:10; 
 
} 
 

 

 
ul::after{ 
 
    display:block; 
 
    background-color:white; 
 
    position:absolute; 
 
    bottom:0px; 
 
    height:8px; 
 
    width:100%; 
 
    content:""; 
 
    z-index:1; 
 
}

<ul> 
 
    <li>variable</li> 
 
    <li>amount</li> 
 
    <li>of</li> 
 
    <li>items</li> 
 
</ul>

的ul風格設置一個寬度爲求的演示。 padding-left:0刪除<ul>左側的邊距，也是可選的。該位置被設置爲相對的，因爲after內容將被絕對定位，相對於<ul>/

ul::after樣式將白色塊插入列表後面。 position:absolute和bottom:0px將它置於列表的底部，相對於<ul>。 z-index設置爲確保它位於底部<li>

li:last-child確保它位於ul::after內容的頂部。

來源

2015-01-31 22:54:45 chiliNUT

對於我的用法，'李：最後孩子'的東西是不需要的。無論如何，謝謝你的解決方案。 – SReject 2015-01-31 23:02:14

很高興它適合你！ – chiliNUT 2015-01-31 23:07:24

你可以用你想要的設置爲從父繼承大小的框架裏面的內容 - 你要的8像素。

如果我誤解了jsfiddle會很好。

編輯： Like this?

.wrapper{ 
    position: relative; 
    left: 20px; 
    height: 46px; 
    background-image: url('http://i.imgur.com/qIaw9Lc.png'); 
    background-repeat: repeat-y; 
}

來源

2015-01-31 22:40:20

小提琴添加到OP – SReject 2015-01-31 22:50:06

在特定點後停止背景重複

回答

相關問題