如何將背景圖案圖像應用於html工具提示箭頭？

我正在爲工具提示實現一個自定義的jquery插件。當鼠標懸停在特定元素上時，該插件將顯示一個工具提示框。我的工具提示區域有一個指向基本元素的箭頭。如何將背景圖案圖像應用於html工具提示箭頭？

我想將重複紋理圖像應用到包括箭頭在內的整個工具提示。我可以將圖案圖像分配給工具提示背景，但我如何將它分配給箭頭。

我的問題更多的是如下圖所示：

enter image description here

以下爲箭頭代碼：
HTML：

<div class="tooltip_outer"> 
    <div class="tooltip_arrow"></div> 
    <div class="tooltip_txt">Tooltip content</div> 
</div>

CSS：

.tooltip_outer { 
    position: absolute; 
    z-index: 5; 
    background: #000000 url(images/pattern.png); 
    padding: 0; 
    margin: 5px 3px; 
    width: 135px; 
    box-shadow: 0 0 10px #999; 
} 
.tooltip_arrow { 
    top: -14px; 
    position: absolute; 
    border: 7px solid transparent; 
    display: inline-block; 
    border-width: 7px; 
    border-bottom-color: #000000; 
    left: 50%; 
} 
.tooltip_txt { 
    margin: 10px; 
    color: white; 
}

請引導我。提前致謝。

來源

2013-02-12 Vin

檢查了這一點：http://jsfiddle.net/LqX9Z/ – Pete 2013-02-12 12:28:54

如果我理解你是正確的，你想添加重複的模式來提高工具提示的頂端部分，但看起來你已經有了它。如果圖像不相關，則只需像添加其他div一樣添加CSS背景圖像。 – mhartington 2013-02-12 12:32:11

使用CSS無法將背景圖像應用於邊框。邊框用作邊框，而不是形狀。

您可以使用箭頭旋轉45度的DIV，但在舊瀏覽器中會出現問題。

編輯：我已經找到了附加圖案圖像邊框的新的CSS3禮節，我認爲這是你在找什麼：

http://www.vanseodesign.com/css/border-images/

來源

2013-02-12 12:29:31

如何將背景圖案圖像應用於html工具提示箭頭？

回答

相關問題