背景圖像溢出

我試圖做類似如下：背景圖像溢出

ul { 
    background-color: white; 
    border-radius: 5px 5px 5px 5px; 
    display: block; 
    margin-top: 16px; 
    padding: 10px; 
    position: absolute; 
    top: 25px; 
    z-index: 1000; 
    background-image: url(arrow.png); 
    background-position: -10px -10px; 
} 

<ul> 
<li>1</li> 
<li>2</li> 
</ul>

現在我的問題是，我不能讓箭頭從圓形白盒突出部分進行。就像一個工具提示。我不想使用額外的div或其他元素。可能嗎？

來源

2011-05-13 Alec Smart

我已經成功的最好的是這樣的：

ul 
{ 
    display: block; 
    margin-top: 16px; 
    padding-left: 10px; /* pad for size of arrow image */ 
    position: absolute; 
    top: 25px; 
    z-index: 1000; 
    background:url("arrow.png") no-repeat top left; 
} 

ul li 
{ 
    margin:0; padding:0; 
    list-style-type:none; 
    background-color:white; 
    width:60px; /* fiddle with sizing for box */ 
} 

ul li:first-child 
{ 
    border-radius: 0px 5px 0px 0px; 
} 

ul li:last-child 
{ 
    border-radius: 0px 0px 5px 5px; 
}

來源

2011-05-13 11:12:22 MalphasWats

-1

你可以用javascript來實現這一點，可能最容易與jQuery'wrap'將額外的div放在你的li標籤中，然後你可以使用css進行設計。

來源

2011-05-13 10:13:53

這是如何不使用額外的元素呢？ – adamse 2011-05-13 10:32:13

額外的元素不必在列表中進行硬編碼，如果手動輸入列表，或者即使從數據庫中拉出列表並且使用例如數據庫生成，這也是有用的。 PHP。樣式和內容仍然是獨立的，儘管額外的元素存在於渲染頁面中，但它們是在瀏覽器中生成的，不需要直接放入內容。因此'不使用額外的元素'。 – 2011-05-13 10:51:25

背景圖像溢出

回答

相關問題