0

ツールチップ用のカスタムjqueryプラグインを実装しています。このプラグインは、マウスを特定の要素に合わせるとツールチップボックスを表示します。ツールチップブロック領域には、ベース要素を指す矢印があります。

矢印を含むツールチップ全体に繰り返しテクスチャ画像を適用したい。パターン画像をツールチップの背景に割り当てることはできますが、矢印に割り当てるにはどうすればよいですか。

私の問題は次の画像でより詳しく説明されています：

ここに画像の説明を入力してください

以下は矢印のコードです：
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;
}

案内してください。前もって感謝します。

4

2 に答える 2

0

CSS では、境界線に背景画像を適用できません。境界線は、形状ではなく、境界線として意図されています。

矢印として 45 度回転した DIV を使用できますが、古いブラウザーでは問題があります。

編集:境界線にパターン画像を追加するための新しい CSS3 の妥当性を見つけました。それはあなたが探しているものだと思います:

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

于 2013-02-12T12:29:31.857 に答える