Question

我正在制作一个带有醉意工具提示的工具栏。我改变了CSS来改变颜色，然后我做了箭头的图像。这里是图像的链接：http://www.novaprogramming.com/tipsy.png颜色是：＃454545由于某种原因它不会出现？

Answer 1

由于箭头图像是图像精灵......您需要指定背景位置属性。检查tis http://jsfiddle.net/hwsns/2/。注意我添加的CSS

Answer 2

您的箭头存储在css精灵中，这意味着您需要正确设置背景位置，以便显示箭头。你的精灵中有4个箭头：北，东，南和西，每个都位于相应边缘的中心。这些箭头的当前css假定箭头始终位于不正确的角落。要显示箭头，您必须更正这些属性，如下所示：

.tipsy-n .tipsy-arrow {
    background-position: center top;
    left: 50%;
    margin-left: -4px;
    top: 0;
}
.tipsy-s .tipsy-arrow {
    background-position: center bottom;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-e .tipsy-arrow {
    background-position: right center;
    height: 9px;
    margin-top: -4px;
    right: 0;
    top: 50%;
    width: 5px;
}
.tipsy-w .tipsy-arrow {
    background-position: left center;
    height: 9px;
    left: 0;
    margin-top: -4px;
    top: 50%;
    width: 5px;
}

background-position的第一个值指定水平位置，第二个值指定图像的垂直位置。您也可以使用百分比值代替看起来像这样的关键字：

.tipsy-n .tipsy-arrow {
    background-position: 50% 0;
    left: 50%;
    margin-left: -4px;
    top: 0;
}
.tipsy-s .tipsy-arrow {
    background-position: 50% 100%;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-e .tipsy-arrow {
    background-position: 100% 50%;
    height: 9px;
    margin-top: -4px;
    right: 0;
    top: 50%;
    width: 5px;
}
.tipsy-w .tipsy-arrow {
    background-position: 0 50%;
    height: 9px;
    left: 0;
    margin-top: -4px;
    top: 50%;
    width: 5px;
}

Tipsy Tooltip箭头麻烦

2 个答案: