背景图像溢出

我试图做类似如下：背景图像溢出

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

背景图像溢出

回答

相关问题