コンパススタイル - スプライト：柔軟な背景画像

私はシンプルなツールチップのためにコンパスの偉大なスプライト機能を使用してみてください。コンパススタイル - スプライト：柔軟な背景画像

私が作りたいものがある：

HTMLコード：

<h2>*BUG* Sprite Tooltip with Compass</h2><br /><br /> 
     <div id="tooltip_test"> 
      <div class="tooltip-Tooltip_up"></div> 
      <div class="tooltip-Tooltip_bg">asdsad<br /></div> 
      <div class="tooltip-Tooltip_down"></div> 
     </div> 
     <h2>Sprite Tooltip with Compass &customBG</h2><br /><br /> 
     <div id="tooltip_test"> 
      <div class="tooltip-Tooltip_up"></div> 
      <div class="custombg">asdsad</div> 
      <div class="tooltip-Tooltip_down"></div> 
     </div>

最初のツールチップのために、私はコンパスによって生成されたBGクラスを使用します。

が第二ツールチップのために、私は（私が何をしたいかを示すために）カスタムBGクラスを使用

生成されたスプライトは次のとおりです。

（最初の画素ラインがバックグラウンドで画像は、その後、ヘッダーとフッター）

だから私の質問は次のとおりです。

は番目ですERE posibiltyはツールチップの柔軟な高さを有するために（コンパスによって生成される）spriteimageのBG-面積を繰り返しますか？

私の手で生成されたクラスのコードは次のとおりです。あなたの助けのための

.custombg { 
     background: url('images/tooltip/Tooltip_bg.png'); 
     height: 100px; 
     width: 258px; 
    }

ありがとう！コンパスv0.12のよう

出典

2011-09-14 M00ly

CSSのみのソリューション：のhttp：// CSS-トリック。com/examples/ShapesOfCSS /＃talkbubble – feeela

CSS専用のリンクありがとう:) しかし、私は本当にIEのサポートのためにスプライトを使用したいと思います – M00ly

、スプライトの一部を繰り返すことが可能であるが、唯一のx軸上の動作を繰り返します。

あなたの引用バブルの真ん中の部分は、あなたがCSSでそれをスタイルと引用バブルの上部と下部のための既存のスプライトを使用することができるだけでフラットな色なので。

純粋なcss3を使用してこれを行うには多くの方法がありますが、イメージを使用して古いバージョンのIEでこの機能を使用する場合は、単一のhtml要素のbeforeおよびafter擬似要素を使用できます。

は

は、このファイル構造を使用して...これを試してみてください：

images/ 
    tooltip/ 
    top.png 
    bottom.png 
    tooltip-sfc34d436c9.png <-- Sass will create this file. 
sass/ 
    sprite.sass 
sprite.html 
stylesheets/ 
    sprite.css

そしてsprite.htmlはこれを含んでいます

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <link href="stylesheets/sprite.css" rel="stylesheet" /> 
    </head> 
    <body> 
    <div class="tooltip"> 
     To be, or not to be, that is the question. 
    </div> 
    </body> 
</html>

そしてsprite.sassはこれを含んでいます

// Sprite setup 
$tooltip-sprite-dimensions: true 
@import "tooltip/*.png" 

// Tooltip styles 
$tooltip-top-image: "tooltip/top.png" 
$tooltip-top-width: image-width($tooltip-top-image) 
$tooltip-top-height: image-height($tooltip-top-image) 
$tooltip-bottom-image: "tooltip/bottom.png" 
$tooltip-bottom-width: image-width($tooltip-bottom-image) 
$tooltip-bottom-height: image-height($tooltip-bottom-image) 
$tooltip-width: $tooltip-top-width 
$tooltip-h-padding: 10px 
.tooltip 
    position: relative 
    width: $tooltip-width - ($tooltip-h-padding * 2) 
    background: #8aa5bb 
    padding: $tooltip-top-height $tooltip-h-padding $tooltip-bottom-height 
    &:before 
    content: "" 
    position: absolute 
    top: 0 
    left: 0 
    +tooltip-sprite(top) 
    &:after 
    content: "" 
    position: absolute 
    bottom: 0 
    left: ($tooltip-width - $tooltip-bottom-width)/2 
    +tooltip-sprite(bottom)

そしてsprite.cssこのsprite.cssにコンパイル：

.tooltip-sprite, .tooltip:before, .tooltip:after { 
    background: url('../images/tooltip-sfc34d436c9.png') no-repeat; 
} 
.tooltip { 
    position: relative; 
    width: 232px; 
    background: #8aa5bb; 
    padding: 15px 10px 13px; 
} 
.tooltip:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-position: 0 -13px; 
    height: 15px; 
    width: 252px; 
} 
.tooltip:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: -3px; 
    background-position: 0 0; 
    height: 13px; 
    width: 258px; 
}

完成ツールチップは次のようになります。

finished tooltip

出典

2012-03-25 01:59:02

コンパススタイル - スプライト：柔軟な背景画像

答えて

関連する問題